Создание шеврона в CSS

Я смотрю, как создать в CSS шеврон (а не треугольник). В основном создайте значки, которые выглядят как > или <.

На этом сайте: http://css-tricks.com/examples/ShapesOfCSS/ внизу, есть шеврон. Однако это указано. Мне было интересно, как я могу сделать это правильно, и указать налево. Я пытался играть с углами, но я не мог понять это, так как я не совсем уверен, как эти вещи созданы в любом случае.

Как в стороне, это что-то, что должно быть создано в некоторой библиотеке рисования, например d3, или просто использовать div? Я в основном использую этот шеврон, чтобы попытаться выделить визуальные элементы на экране.

Ответ 1

Просто выполните rotate(90deg) на #chevron:

#chevron {
  position: relative;
  top: 100px;
  text-align: center;
  padding: 12px;
  margin-bottom: 6px;
  height: 60px;
  width: 200px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

http://jsfiddle.net/29Edw/

Ответ 2

Управление, создание и управление шевронами с использованием границ CSS

Следуйте указаниям в этом примере, чтобы изменить результаты.

Параметры, которые могут быть изменены:

Rotate
Толщина/ширина рамки
Цвет
Размер

.Chevron{
    position:relative;
    display:block;
    height:50px;/*height should be double border*/
}
.Chevron:before,
.Chevron:after{
    position:absolute;
    display:block;
    content:"";
    border:25px solid transparent;/*adjust size*/
}
/*Change four 'top' values below to rotate (top/right/bottom/left)*/
.Chevron:before{
    top:0;
    border-top-color:#b00;/*Chevron Color*/
}
.Chevron:after{
    top:-10px;/*adjust thickness*/
    border-top-color:#fff;/*Match background colour*/
}

<i class="Chevron"></i>

Ответ 3

Вот еще два способа сделать шеврон с CSS. Они не используют преобразование или вращение, поэтому он совместим с IE8 +, но предостережение в том, что вы должны установить цвет шеврона и цвет фона, на котором сидит шеврон:

CSS Chevron - Два треугольника

.chevron {
    display:inline-block;
    width: .5em;
    height: .8em;
    position:relative;
}
.chevron:before,
.chevron:after {
    display:block;
    content:"";
    width:0;
    height:0em;
    border-style:solid;
    position:absolute;
}
.chevron:before {
    right:0;
    border-width:.4em 0 .4em .4em;
    border-color:transparent transparent transparent red;    
}
.chevron:after {
    left:0;
    border-width:.4em 0 .4em .4em;
    border-color:transparent transparent transparent #fff;    
}
.chevron.skinny {
    width:.4em;
}
.chevron.fat {
    width:.6em;
}

CSS Chevron - три треугольника

.chevron {
    display:inline-block;
    background:red;
    width: .55em;
    height: .75em;
    position:relative;
}
.chevron:before,
.chevron:after {
    display:inline-block;
    content:"";
    width:0;
    height:0em;
    border-style:solid;
    position:absolute;
}
.chevron:before {
    left:0;
    border-width:.4em 0 .4em .4em;
    border-color:transparent transparent transparent #fff;    
}
.chevron:after {
    right:0;
    border-width:.4em 0 .4em .4em;
    border-color:#fff transparent;    
}
.chevron.skinny {
    width:.4em;
}
.chevron.fat {
    width:.7em;
}

Ответ 4

p:before { content:"\2039"; }
p:after  { content:"\203A"; }

Другое решение для этого конкретного примера (без вращения и использования символов символов chevron)

Ответ 5

- такой длинный код, поэтому я сделал это fiddle
в основном выполняется с использованием псевдоселекторов :before и :after

Ответ 6

Вы можете использовать глиф CSS &rang; , &lang; http://css-tricks.com/snippets/html/glyphs/

Ответ 7

Спасибо Обсидиану за ваш ответ. Я преобразовал его в Sass mixin, так что вы можете легко передать настройки через него, чтобы генерировать ваши аранжировки.

/* $class outputs the selector, do not place mixin within a rule
   $dir == up, down, left or right,
   $bg == background-color of arrow container 
*/ 

@mixin arrow($class, $size, $weight, $color, $dir, $bg) {
    @if $dir == up {
        $dir : bottom;
    }
    @elseif $dir == down {
        $dir : top;
    }
    @elseif $dir == right {
        $dir : left;
    } 
    @else {
        $dir : right;
    }

   .#{$class} {
       position:relative;
       display:block;
       height: $size * 2;
    }

   .#{$class}:before,
   .#{$class}:after {
       position:absolute;
       display:block;
       content:"";
       /*Size*/
       border:$size solid transparent;
    }

    .#{$class}:before {
        #{$dir}:0;
        /*Arrow Color*/
        border-#{$dir}-color:$color;
    }

   .#{$class}:after {
      /*Thickness*/
      #{$dir}:-$weight;
      border-#{$dir}-color:$bg;
   }
}

Пример использования:

@include arrow(arrow-right, 25px, 5px, #cecece, right, #fff);

Ответ 8

Если вы не против использования существующего решения, FontAwesome имеет этот и другие глифы в значке, который вы можете использовать в своей разметке: http://fortawesome.github.io/Font-Awesome/#icon/icon-chevron-down

Вы бы использовали его так (после выполнения инструкций по включению необходимых файлов):

<i class="icon-chevron-down"></i>

Ответ 9

ОК, поэтому мне нужно было повторно использовать шеврон без повторения идентификатора.,.so вот что я придумал (спасибо Yenn). (Мне нужны маленькие шевроны для моего приложения).

он использует класс вместо тега идентификатора, также использует каскадный класс, чтобы перевернуть его влево., вместо того, чтобы удвоить мой код css.

.chevron {
  position: relative;
  padding: 0px;
  height:17px;
  width: 6px;
  margin-left:0px;
  margin-top:0px;
}

.chevron:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 50%;
  width: 100%;
  background: gray;
  -webkit-transform: skew(25deg, 0deg);
  -moz-transform: skew(25deg, 0deg);
  -ms-transform: skew(25deg, 0deg);
  -o-transform: skew(25deg, 0deg);
  transform: skew(25deg, 0deg);
}

.chevron:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  height: 50%;
  width: 100%;
  background: gray;
  -webkit-transform: skew(-25deg, 0deg);
  -moz-transform: skew(-25deg, 0deg);
  -ms-transform: skew(-25deg, 0deg);
  -o-transform: skew(-25deg, 0deg);
  transform: skew(-25deg, 0deg);
}

.rotate180
{
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);

}

http://jsfiddle.net/n5Fd8/

Ответ 10

Я нашел все эти решения более сложными и/или менее гибкими, чем то, что я искал (с точки зрения размера и/или толщины), поэтому я хотел поделиться используемым мной кодом. Я также включил состояние Hover для использования со ссылками.

Ссылка на скрипт

CSS

.chevron a:before {
  border-style: solid;
  border-width: 0.1em 0.1em 0 0;  /* Line thickness */
  content: '';
  display: inline-block;
  height: 5em;     /* Arrow size; Height & Width must remain equal */
  width: 5em;
  left: 0.15em;
  position: relative;
  transform: rotate(-45deg);     
  color: #808080;
}

/* Hover State */   
.chevron a:hover:before {
  content: '';
  color: black;
}      

/* Right Arrow */   
.chevron.right a:before {
 left: 0;
 transform: rotate(45deg);    
}

/* Down Arrow */   
.chevron.bottom a:before {
  top: 0;
  transform: rotate(135deg);
  /* To position at top of element, compensate for rotation with margin-top: -2.5em; */
}

HTML

<div class="chevron right">
  <a href="#" style="background-color: white;"></a>
</div>

<div class="chevron bottom">
  <a href="#" style="background-color: white;"></a>
</div>

Ответ 11

CSS3-free, это старая школа с границами:

.chevron {
    display: inline-block;
    vertical-align: middle;
}
.chevron:before,
.chevron:after {
    content: '';
    display: block;
    overflow: hidden;
    height: 0;
    width: 0;
    border: solid black 20px;
}
.chevron.up:before,
.chevron.up:after {
    border-bottom-width: 12px;
    border-top-width: 0;
}
.chevron.up:before,
.chevron.down:after {
    border-left-color: transparent;
    border-right-color: transparent;
}
.chevron.up:after {
    border-top-width: 7px;
    border-bottom-color: transparent;
}
.chevron.down:before,
.chevron.down:after {
    border-top-width: 12px;
    border-bottom-width: 0;
}
.chevron.down:before {
    border-bottom-width: 7px;
    border-top-color: transparent;
}
.chevron.left:before,
.chevron.left:after,
.chevron.right:before,
.chevron.right:after {
    display: inline-block;
}
.chevron.left:before,
.chevron.left:after {
    border-right-width: 12px;
    border-left-width: 0;
}
.chevron.left:before,
.chevron.right:after {
    border-top-color: transparent;
    border-bottom-color: transparent;
}
.chevron.left:after {
    border-left-width: 7px;
    border-right-color: transparent;
}
.chevron.right:before,
.chevron.right:after {
    border-left-width: 12px;
    border-right-width: 0;
}
.chevron.right:before {
    border-right-width: 7px;
    border-left-color: transparent;
}

<span class="chevron down"></span>
<span class="chevron up"></span>
<span class="chevron right"></span>
<span class="chevron left"></span>