Как это сделать на CSS?

Question

[unfapable]

CSS-гуру, можно ли средствами CSS сделать эту картинку?

Answer 1

[HamSter]

html:

<div class="wrap">
  <a href="#" class="btn"></a>
</div>

css:

.wrap {
  background: #000;
}

.btn {
  display: block;
  position: relative;
  width: 15rem;
  height: 7rem;
  background: #fff;
  margin: 0 auto;
  border-radius: 0 1rem 1rem 0;
}

.btn:before {
  content: '';
  width: 0;
  height: 0;
  border-top: 3.5rem solid transparent;	
  border-bottom: 3.5rem solid transparent;
  border-right: 3rem solid #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -3rem;
}

jsbin

Answer 2

[riot26]

https://codepen.io/riot26/pen/RWjRZB

Answer 3

[Борис Якушев]

Используйте :before

Answer 4

[Justin Bieber]

наложить друг на друга два дива, сдвинуть один, у одного один тип углов, у другого другой )

Comments

[Justin Bieber]

или сделать одного типа прямоугольник, а сбоку маленький блок другого типа угла подставить

[Justin Bieber]

https://habrahabr.ru/post/126207/