Search code examples
csssvgcss-shapes

How can I create attached shape using css or scss?

How can I create the following shape

Shape

using CSS or SCSS? My markup:

<div class="shape-section">
    <div class="line shape-line-one"></div>
    <div class="line shape-line-two"></div>
    <div class="line shape-line-three"></div>
    <div class="line shape-line-four"></div>
</div>

and styles:

.shape-section {
  position: relative;
  .line {
    width: 175px;
    height: 22px;
    background-color: grey;
    &.shape-line-one {
      border-radius: 0 20px 20px 0;
      position: absolute;
      transform: rotate(146deg);
      top: -72px;
      right: 0;
      z-index: 0;
    }
    &.shape-line-two {
      border-radius: 0 20px 20px 0;
      position: absolute;
      transform: rotate(54deg);
      top: -20px;
      right: -20px;
      z-index: 0;
    }
    &.shape-line-three {
      border-radius: 0 20px 20px 0;
      position: absolute;
      transform: rotate(45deg);
      top: -155px;
      z-index: 0;
    }
    &.shape-line-four {
      border-radius: 0 20px 20px 0;
      position: absolute;
      transform: rotate(325deg);
      top: -60px;
      left: 13px;
      z-index: 0;
    }
  }
  
}

Is my approach correact? Please help me draw this section. What my end goal is to draw the structure like attached image using CSS or SCSS.

Solution

  • Here is an idea with rotation and gradient:

    .box {
  width: 200px;
  height: 150px;
  position: relative;
  overflow:hidden;
}

.box span::before,
.box span::after {
  content: "";
  position: absolute;
  height: 120%;
  width: 20px;
  background: #000;
  transform: rotate(60deg);
}

.box span:first-child::before{
  top: 0;
  right: 10%;
  border-radius: 0 0 50px 50px;
  transform-origin: top right;
}
.box span:first-child::after {
  bottom: 0;
  left: 10%;
  border-radius:50px 50px 0 0;
  transform-origin: bottom left;
}

.box span:last-child::before,
.box span:last-child::after {
  height: 100%;
  transform: rotate(-60deg);
}

.box span:last-child::before{
  top: 0;
  left: 10%;
  transform-origin: top left;
  background:linear-gradient(30deg, transparent 10px, #000 11px 40px, transparent 41px 50px,#000 0);
}
.box span:last-child::after {
  bottom: 0;
  right: 10%;
  transform-origin: bottom right;
  background:linear-gradient(210deg, transparent 10px, #000 11px 50px, transparent 51px 80px,#000 0);
}
    <div class="box">
  <span></span>
  <span></span>
</div>