Как сделать такой уголок с помощью сss?

Question

[Мариана Марианова]

Подскажите пожалуйста как сделать такой уголок с помощью сss? joxi.ru/gmvnKPOcxeZJzm - Размер его 12px на 52px
Пробовала тут - https://jsfiddle.net/o15dcLnq/ получается какой-то кривой

Comments

[sergski]

посмотрите тут

Answer 1

[Андрей]

Полно готовых

Answer 2

[Сергей delphinpro]

Вставлю свои пять копеек https://codepen.io/delphinpro/pen/GmRJBJ

Comments

[Мариана Марианова]

супер решение! Спасибо Вам!

Answer 3

[iBird Rose]

к примеру сделать через after и before прямоугольники, которые с помощью rotate расположить таким образом.
ну и у них должен быть border с одной из сторон.

Answer 4

[one_day]

width: 0;
height: 0;
border-style: solid;
border-width: 26px 0 26px 12px;
border-color: transparent transparent transparent #c2c2c2;

Comments

[Мариана Марианова]

пробовала так, он получается какой-то не ровный https://jsfiddle.net/o15dcLnq/

[one_day]

Марина Галий:

значение right подвигать

.rebate-action-register {
	display:flex;
	justify-content: space-between;
	border: 1px solid #E4E4E4;
	max-width:1440px;
	margin: auto;
}
.rebate-action-item {
  position:relative;
  width:33.33%;
}
.rebate-action-item:first-child {
  margin:0;
  z-index:2;
}

.rebate-action-item:nth-child(2) {
  z-index:1;
}

.rebate-action-item:after {
  content: "";
  position:absolute;
  right: -13px;
  top:0;
  width: 0; 
  height: 0; 
  border-style: solid; 
  border-width: 26px 0 26px 12px; 
  border-color: transparent transparent transparent #c2c2c2;
}

a {
  display: block;
  text-align:center;
  height: 52px;
  background: #FBFBFB;
  position: relative;
  font-size: 17px;
  color: #999999;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
a:hover {
  text-decoration: none;
}

.rebate-action-item.active a {
  background-color:#009966;
  color:white;
}

.rebate-action-item.active span {
  color:white;
}

.rebate-action-item.grey a {
  background-color:#F2F2F2;
  color: @color-black-ish;
}

.rebate-action-item.grey span {
  background-color:#F2F2F2;
  color:#BE0027;
}

.rebate-action-item.active a:after {
  border-top: 26px solid transparent;
  border-bottom: 26px solid transparent;
  border-left: 12px solid #009966;
}

.rebate-action-item.grey a:after {
  border-top: 26px solid transparent;
  border-bottom: 26px solid transparent;
  border-left: 12px solid #F2F2F2;
}

.rebate-action-item.active a:after,
.rebate-action-item.grey a:after {
  content: "";  
  position: absolute;
  right: -12px;
  top: 0;
  z-index: 1;
}

.rebate-action-item:last-child a:after,
.rebate-action-item:last-child:after {
  display:none;
}

Answer 5

[Максим]

https://codepen.io/simkaUser/pen/jLQemB?editors=1100 так вроде