Как реализовать загнутый уголок?

306
23 января 2018, 10:10

Подскажите, пожалуйста как средствами CSS реализовать такой маркер? Интересует именно этот уголок скругленный. Пробовал через :after но не могу придумать как быть с прозрачностью заднего фона? Сзади находится фото:

Answer 1

Собственно ваш вопрос в этом border-bottom-left-radius: 20px; в .marker:before ?

* { 
  box-sizing: border-box; 
} 
 
.marker { 
  width: 300px; 
  height: 300px; 
  background: tomato; 
  padding: 10px; 
  border-radius: 20px; 
  position: relative; 
} 
 
.border { 
  width: 100%; 
  height: 100%; 
  border: 3px dashed orange; 
  border-radius: 20px; 
} 
 
.marker:before { 
  content: ""; 
  border-top: 50px solid #fff; 
  border-right: 50px solid #fff; 
  border-bottom: 50px solid orange; 
  border-left: 50px solid orange; 
  position: absolute; 
  top: 0; 
  right: 0; 
  border-bottom-left-radius: 20px; 
}
<div class="marker"> 
  <div class="border"></div> 
</div>

для экспериментов : https://codepen.io/topicstarter/pen/vpPEeW

READ ALSO
Проблема с модальными окнами

Проблема с модальными окнами

Всем здравствуйте! Недавно начал изучать основу вёрсткиВерстал по макету и столкнулся с двумя проблемами

353
Почему в таблице при `border-collapse: separate` не отображается border-top у thead?

Почему в таблице при `border-collapse: separate` не отображается border-top у thead?

Если я ставлю параметр border-collapse: collapse, то border - видноЧем регулируется это поведение?

232
C# XMl || XmlNode.AppendChild

C# XMl || XmlNode.AppendChild

Требуется к указанному узлу добавить дочерний узелИсключений не возникает, но файл data

231