在CSS中创建一个V形

Question

我正在研究如何在CSS中创建一个V形(而不是三角形).基本上创建看起来像>或的图标<.

在这个网站上:http://css-tricks.com/examples/ShapesOfCSS/在底部,有一个雪佛龙.然而,它被指出.我想知道如何让它指向正确,并指向左边.我试着玩角度,但我无法理解,因为我不确定这些东西是如何创造的.

顺便说一句,这是应该在某些绘图库中创建的东西,比如d3,还是只使用div？我基本上使用这个雪佛龙试图在屏幕上分离视觉元素.

Answer 1

使用CSS边框管理,创建和控制V形符号

按照示例中的注释更改结果.

可以改变的参数:

1. 回转.
2. 厚度.
3. 颜色.
4. 规模.

.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 the four instances of 'top' 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>

Answer 2

只是做一个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/

Answer 3

这是右 V 形的简单 CSS 实现。您在 :after 伪元素的两侧创建边框，并通过rotate() 函数将其旋转负 45 度。

.container:after {
  content: ' ';
  display: inline-block;
  border-bottom: 1px solid #f00;
  border-right: 1px solid #f00;
  height: 10px;
  width: 10px;
  transform: rotate(-45deg);
}

<div class="container"></div>

Answer 4

以下是使用CSS制作雪佛龙的另外两种方法.这些不使用变换或旋转,因此它与IE8 +兼容,但需要注意的是,您必须设置V形的颜色和V形符号所在背景的颜色:

CSS雪佛龙 - 两个三角形

.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 {
    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;
}

Answer 5

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

针对此特定示例的不同解决方案(无旋转和使用V形字符代码)