Как сделать причудливую стрелку с помощью CSS?
Ok, поэтому все знают, что вы можете сделать треугольник, используя это:
#triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
и это создает твердый, заполненный треугольник. Но как бы вы сделали полый треугольник, подобный стреле, как этот?
10 ответов
вы можете использовать before
или after
псевдо-элемент и применить к нему CSS. Есть разные способы. Вы можете добавить оба before
и after
, и поверните и расположите каждый из них, чтобы сформировать один из баров. Более простым решением является добавление двух границ только в before
элемент и повернуть его с помощью transform: rotate
.
прокрутите вниз для другого решения, которое использует фактический элемент вместо элементов pseuso
в этом случае, я добавил стрелки как пули в списке и используются em
размеры, чтобы сделать их размер правильно с шрифтом списка.
ul {
list-style: none;
}
ul.big {
list-style: none;
font-size: 300%
}
li::before {
position: relative;
/* top: 3pt; Uncomment this to lower the icons as requested in comments*/
content: "";
display: inline-block;
/* By using an em scale, the arrows will size with the font */
width: 0.4em;
height: 0.4em;
border-right: 0.2em solid black;
border-top: 0.2em solid black;
transform: rotate(45deg);
margin-right: 0.5em;
}
/* Change color */
li:hover {
color: red; /* For the text */
}
li:hover::before {
border-color: red; /* For the arrow (which is a border) */
}
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
<ul class="big">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
конечно, вам не нужно использовать before
или after
, вы можете применить тот же трюк и к нормальному элементу. Для вышеприведенного списка это удобно, потому что вам не нужна дополнительная разметка. Но иногда вы можете хотеть (или нуждаться) разметку в любом случае. Вы можете использовать div
или span
для этого, и я даже видел людей даже переработать i
элемент для "икон". Чтобы разметка выглядела как ниже. Ли используя <i>
для этого правильно спорно,но вы можете использовать span для этого, а также быть в безопасности.
/* Default icon formatting */
i {
display: inline-block;
font-style: normal;
position: relative;
}
/* Additional formatting for arrow icon */
i.arrow {
/* top: 2pt; Uncomment this to lower the icons as requested in comments*/
width: 0.4em;
height: 0.4em;
border-right: 0.2em solid black;
border-top: 0.2em solid black;
transform: rotate(45deg);
}
And so you can have an <i class="arrow" title="arrow icon"></i> in your text.
This arrow is <i class="arrow" title="arrow icon"></i> used to be deliberately lowered slightly on request.
I removed that for the general public <i class="arrow" title="arrow icon"></i> but you can uncomment the line with 'top' <i class="arrow" title="arrow icon"></i> to restore that effect.
если вы ищете больше вдохновения, Не забудьте проверить эту удивительную библиотеку pure CSS иконки Николя Галлахер. :)
Это можно решить гораздо проще, чем другие предложения.
просто нарисуйте квадрат и примените border
свойство к как раз 2 соединяя сторонам.
затем поверните квадрат в соответствии с направлением, в котором вы хотите, чтобы стрелка указывала, для exaple:transform: rotate(<your degree here>)
.triangle {
border-right: 10px solid;
border-bottom: 10px solid;
height: 30px;
width: 30px;
transform: rotate(-45deg);
}
<div class="triangle"></div>
отзывчивый стрелки
они изменение размера автоматически с помощью текст и цвета тот же цвет. подключи и играй :)
jsBin демо-площадка
body{
font-size: 25px; /* Change font and see the magic! */
color: #f07; /* Change color and see the magic! */
}
/* RESPONSIVE ARROWS */
[class^=arr-]{
border: solid currentColor;
border-width: 0 .2em .2em 0;
display: inline-block;
padding: .20em;
}
.arr-right {transform:rotate(-45deg); -webkit-transform:rotate(-45deg);}
.arr-left {transform:rotate(135deg); -webkit-transform:rotate(135deg);}
.arr-up {transform:rotate(-135deg); -webkit-transform:rotate(-135deg);}
.arr-down {transform:rotate(45deg); -webkit-transform:rotate(45deg);}
This is <i class="arr-right"></i> .arr-right<br>
This is <i class="arr-left"></i> .arr-left<br>
This is <i class="arr-up"></i> .arr-up<br>
This is <i class="arr-down"></i> .arr-down
вот другой подход:
1) Используйте символ умножения:×
×
2) скрыть половину с overflow:hidden
3) затем добавьте треугольник в качестве псевдо-элемента для наконечника.
преимущество здесь в том, что никакие преобразования не нужны. (Он будет работать в IE8+)
.arrow {
position: relative;
}
.arrow:before {
content: '×';
display: inline-block;
position: absolute;
font-size: 240px;
font-weight: bold;
font-family: verdana;
width: 103px;
height: 151px;
overflow: hidden;
line-height: 117px;
}
.arrow:after {
content: '';
display: inline-block;
position: absolute;
left: 101px;
top: 51px;
width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 25px 24px;
border-color: transparent transparent transparent black;
}
<div class="arrow"></div>
просто использовать до и после псевдо-элементы-CSS
*{box-sizing: border-box; padding: 0; margin: 0}
:root{background: white; transition: background .3s ease-in-out}
:root:hover{background: red }
div{
margin: 20px auto;
width: 150px;
height: 150px;
position:relative
}
div:before, div:after{
content: '';
position: absolute;
width: 75px;
height: 20px;
background: black;
left: 40px
}
div:before{
top: 45px;
transform: rotateZ(45deg)
}
div:after{
bottom: 45px;
transform: rotateZ(-45deg)
}
<div/>
другой подход с использованием в границах и С помощью CSS3 свойства :
div, div:after{
border-width: 80px 0 80px 80px;
border-color: transparent transparent transparent #000;
border-style:solid;
position:relative;
}
div:after{
content:'';
position:absolute;
left:-115px; top:-80px;
border-left-color:#fff;
}
<div></div>
>
сама по себе очень замечательная стрелка! Просто добавьте div с ним и стиль.
div{
font-size:50px;
}
div::before{
content:">";
font: 50px 'Consolas';
font-weight:900;
}
<div class="arrowed">Hatz!</div>
стрелка влево вправо с эффектом наведения с помощью Roko C. Buljan box-shadow trick
.arr {
display: inline-block;
padding: 1.2em;
box-shadow: 8px 8px 0 2px #777 inset;
}
.arr.left {
transform: rotate(-45deg);
}
.arr.right {
transform: rotate(135deg);
}
.arr:hover {
box-shadow: 8px 8px 0 2px #000 inset
}
<div class="arr left"></div>
<div class="arr right"></div>
мне нужно изменить input
стрелка в моем проекте. Ниже приводится окончательная работа.
#in_submit {
background-color: white;
border-left: #B4C8E9;
border-top: #B4C8E9;
border-right: 3px solid black;
border-bottom: 3px solid black;
width: 15px;
height: 15px;
transform: rotate(-45deg);
margin-top: 4px;
margin-left: 4px;
position: absolute;
cursor: pointer;
}
<input id="in_submit" type="button" class="convert_btn">
здесь Скрипка
.arrow {
display : inline-block;
font-size: 10px; /* adjust size */
line-height: 1em; /* adjust vertical positioning */
border: 3px solid #000000;
border-left: transparent;
border-bottom: transparent;
width: 1em; /* use font-size to change overall size */
height: 1em; /* use font-size to change overall size */
}
.arrow:before {
content: "a0"; /* needed to hook line-height to "something" */
}
.arrow.left {
margin-left: 0.5em;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-o-transform: rotate(225deg);
-ms-transform: rotate(225deg);
transform: rotate(225deg);
}
.arrow.right {
margin-right: 0.5em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.arrow.top {
line-height: 0.5em; /* use this to adjust vertical positioning */
margin-left: 0.5em;
margin-right: 0.5em;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.arrow.bottom {
line-height: 2em;
/* use this to adjust vertical positioning */
margin-left: 0.5em;
margin-right: 0.5em;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
}
<div>
here are some arrows
<div class='arrow left'></div> space
<div class='arrow right'></div> space
<div class='arrow top'></div> space
<div class='arrow bottom'></div> space with proper spacing?
</div>
похоже на Roko C, но немного больше контроля над размером и размещением.