Есть задача, сделать кнопку в виде стрелки, как на изображении. Есть ли способы срезать уголки кнопки на CSS?
4
-
css triangle – Grundy♦ 3 фев '16 в 15:07
-
и вот – Grundy♦ 3 фев '16 в 15:13
-
1такое ощущение, что я уже отвечал на такой вопрос... – Qwertiy♦ 3 фев '16 в 15:21
-
1@Qwertiy ага, причем мне кажется я видел уже несколько раз подобные вопросы – Grundy♦ 3 фев '16 в 15:22
добавить комментарий
|
2 ответа
*, :befoer, :after {
box-sizing: border-box;
}
div {
float: left;
height: 3em;
line-height: 3em;
padding: 0 .5em 0 1em;
background: green;
border: 3px solid;
border-right: none;
position: relative;
margin-right: 1.5em;
}
div:after {
content: "";
width: 2.2em;
height: 2.2em;
position: absolute;
background: inherit;
top: 0;
bottom: 0;
right: -1.25em;
margin: auto;
border: 3px solid;
border-left: none;
border-bottom: none;
transform: rotate(45deg);
z-index: -1;
}
<div>Arrow Arrow Arrow Arrow Arrow</div>
-
Угол там не 90*, а скажем 100*. Тогда квадратный блок не прокатит. – Kirill Semenov 3 фев '16 в 22:51
-
@KirillSemenov, тогда transform умеет и неквадратные делать, только считать больше придётся. – Qwertiy♦ 4 фев '16 в 12:00
вместо "срезания" уголков можно составить стрелку из двух блоков:
.left, .right {display: inline-block; box-sizing: border-box;}
.left {
width: 150px;
height: 50px;
background: green;
border: 4px solid;
border-right: none;
}
.right {
width: 0px;
height: 0px;
border: 25px solid transparent;
border-left-color: black;
}
.right:before {
content: '';
position: relative;
left: -25px; top: -21px;
display: block;
width: 0px;
height: 0px;
border: 21px solid transparent;
border-left-color: green;
}
<div class="main">
<div class="left"></div><div class="right"></div>
</div>
-
-
@splash58, ну почему? :-) второй треугольник под низ цвета обводки и чуть побольще :) – Grundy♦ 3 фев '16 в 15:09
-
@Grundy я вот сразу бы и не написал. хотя понимаю, что можно. это z index надо? – splash58 3 фев '16 в 15:10
-
@splash58, вроде не обязательно, главное чтобы подложка шла раньше по разметке – Grundy♦ 3 фев '16 в 15:12
-