Как правильно сделать полигоны в html

263

17 марта 2019, 14:10

Всех приветствую. Тут недавно столкнулся с SVG графикой, необходимо сделать одну фигуру. Вроде бы сделал, но столкнулся с рядом нюансов. На фото будет представлено как должно быть, и отдельно кодом, как есть. Читал мануалы разные, перепробовал многие вещи, почему-то не выходит так, как надо.

Тут вроде смотришь, всё легко и просто. Однако простыми силами css такую фигуру адекватной не сделать. Начинаешь делать через полигоны, выходит то, что ниже я вставлю...

Как убрать лишнюю толщину у левого верхнего угла? Как скруглить остальные углы?

Код прилагается.

.big-box { 
  display: flex; 
  flex-direction: row; 
} 
 
.promo-box { 
  margin-right: 1rem; 
}

<div class="big-box"> 
  <div class="promo-box"> 
    <svg width="312" height="472" style="fill: #f2f2f2; stroke: #1698d9;" xmlns="http://www.w3.org/2000/svg" stroke-width="9"> 
        <polygon points="0 50, 50 0, 312 0, 312 472, 0 472"/> 
    </svg> 
  </div> 
  <div class="promo-box"> 
 
    <svg width="312" height="472" style="fill: #f2f2f2; stroke: #1698d9;" xmlns="http://www.w3.org/2000/svg" stroke-width="9"> 
        <polygon points="0 50, 50 0, 312 0, 312 472, 0 472"/> 
    </svg> 
  </div> 
  <div class="promo-box"> 
 
    <svg width="312" height="472" style="fill: #f2f2f2; stroke: #1698d9;" xmlns="http://www.w3.org/2000/svg" stroke-width="9"> 
        <polygon points="0 50, 50 0, 312 0, 312 472, 0 472"/> 
    </svg> 
  </div> 
</div>

    <div class="promo-box"> 
            <svg width="312" height="472">
    <path d="M0 50 L50 0 H 312 V 472 H 0 Z" fill="red" stroke="blue" stroke-width="8" stroke-linejoin="round" stroke-linecap="round" vector-effect="non-scaling-stroke"></path>
    <!-- <polygon points="0 50, 50 0, 312 0, 312 472, 0 472"/> -->
</svg>
        </div>
        <div class="promo-box">
            <svg width="312" height="472"  style="fill: #f2f2f2; stroke: #1698d9;" vector-effect="non-scaling-stroke" xmlns="http://www.w3.org/2000/svg" stroke-width="9">
    <polygon points="0 50, 50 0, 312 0, 312 472, 0 472"/>
</svg>
        </div>
        <div class="promo-box">
            <svg width="312" height="472"  style="fill: #f2f2f2; stroke: #1698d9;" xmlns="http://www.w3.org/2000/svg" stroke-width="9">
    <polygon points="0 50, 50 0, 312 0, 312 472, 0 472"/>
</svg>
        </div>

Пробовал так, но ситуация не изменилась...

Answer 1

Используйте path для рисования линии, и установите viewBox чтобы линия не обрезалась:

.big-box { 
  display: flex; 
  flex-direction: row; 
} 
 
.promo-box { 
  margin-right: 1rem; 
}

<div class="big-box"> 
  <div class="promo-box"> 
    <svg width="312" height="472" viewBox="-5 -5 332 482" style="fill: #f2f2f2; stroke: #1698d9;" xmlns="http://www.w3.org/2000/svg" stroke-width="9"> 
        <path d="M0,50 L50,0 L292,0 a20,20 0 0 1 20,20 L312,452 a20,20 0 0 1 -20,20 L20,472 a20,20 0 0 1 -20,-20 L0,50 L50,0" /> 
    </svg> 
  </div> 
   
  <div class="promo-box"> 
    <svg width="312" height="472" viewBox="-5 -5 332 482" style="fill: #f2f2f2; stroke: #1698d9;" xmlns="http://www.w3.org/2000/svg" stroke-width="9"> 
        <path d="M0,50 L50,0 L292,0 a20,20 0 0 1 20,20 L312,452 a20,20 0 0 1 -20,20 L20,472 a20,20 0 0 1 -20,-20 L0,50 L50,0" /> 
    </svg> 
  </div> 
   
  <div class="promo-box"> 
    <svg width="312" height="472" viewBox="-5 -5 332 482" style="fill: #f2f2f2; stroke: #1698d9;" xmlns="http://www.w3.org/2000/svg" stroke-width="9"> 
        <path d="M0,50 L50,0 L292,0 a20,20 0 0 1 20,20 L312,452 a20,20 0 0 1 -20,20 L20,472 a20,20 0 0 1 -20,-20 L0,50 L50,0" /> 
    </svg> 
  </div> 
</div>

Answer 2

clip-path в помощь:

* { 
  box-sizing: border-box; 
} 
 
img { 
  max-width: 100%; 
} 
 
.row { 
  display: flex; 
} 
 
.card { 
  padding: 0 5px; 
} 
.card-thumb { 
  border-radius: 0px 10px 10px 10px; 
  padding: 3px; 
   
  -webkit-clip-path: polygon(0 100%, 0 25%, 25% 0, 100% 0, 100% 100%); 
clip-path: polygon(0 100%, 0 25%, 25% 0, 100% 0, 100% 100%); 
} 
 
.c-1 { 
  background: #1886bd; 
} 
 
.c-2 { 
  background: #d91667; 
} 
 
.card img { 
  display: block; 
  border-radius: 0px 7px 7px 7px; 
   
  -webkit-clip-path: polygon(0 100%, 0 25%, 25% 0, 100% 0, 100% 100%); 
clip-path: polygon(0 100%, 0 25%, 25% 0, 100% 0, 100% 100%); 
}

<div class="row"> 
  <div class="card "> 
    <div class="card-thumb c-1"> 
      <img src="https://images.unsplash.com/photo-1533738699159-d0c68059bb61?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0bb9888db1d270eab08c77f41120dfca&auto=format&fit=crop&w=600&q=60" alt=""> 
    </div> 
  </div> 
 
  <div class="card "> 
    <div class="card-thumb c-2"> 
      <img src="https://images.unsplash.com/photo-1518064711538-4e27e702c706?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d27c0369f194434f87a058060024cf0d&auto=format&fit=crop&w=600&q=60" alt=""> 
    </div> 
  </div> 
</div>