使用CSS边框

Question

我正在研究如何在CSS中创建一个V形（而不是三角形）。基本上创建看似>或<的图标。

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

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

Answer 1

使用CSS边框

管理，创建和控制V形符号

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

可以改变的参数：

旋转。
厚度。
颜色
缩放。

Example Screenshot

＆＃13;

.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*/
}

＆＃13;

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

＆＃13;

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

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

CSS Chevron - Two Triangles

.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 - Three Triangles

.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 4

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

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

Answer 5

您可以使用CSS字形&rang; , &lang; http://css-tricks.com/snippets/html/glyphs/

Answer 6

是如此长的代码，所以我做了fiddle 基本上是使用:before和:after伪选择器

Answer 7

这是一个正确的人字形的简单 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 8

谢谢Obsidian的回答。我已将其转换为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);

Answer 9

到目前为止尚未提及的另一种可能性是内嵌svg，例如

.breadcrumb::after {
  background-color: #b71c1c;
  width: calc((2/9)*3em);
  height: 3em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 9'%3E%3Cpath d='M-.1 0L2 4.5L-.1 9Z' fill='%237f0000'/%3E%3C/svg%3E");
}

我并不是真正的CSS专家，这也许可以解释为什么我觉得它比其他任何建议都更容易理解和调整。

Here是一个非常不错的工具，可以快速生成svg并转义以将其复制粘贴到CSS中。

此方法也非常灵活，因为您可以绘制几乎任何想要的东西，例如可以完全控制人字形顶点的角度（我认为），这里的其他方法并非如此。

另一个简单的例子：

.profile_menu::before {
  margin-right: 0.5em;
  background-color: #b71c1c;
  width: calc((2/10)*3em);
  height: 3em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:100%25; height:100%25' viewBox='0 0 2 10'%3E%3Ccircle cx='8' cy='5' r='8' fill='%237f0000'/%3E%3C/svg%3E");
}

到目前为止，我发现最大的缺点是必须在svg中指定填充颜色。如果有解决办法的话，那会很好，但是我不需要它，所以没有花太多时间尝试。

关于兼容性的注意事项：在撰写本文时，它分别在最新的firefox（60.0.2），Safari（11.1.1）和chrome（67.0.3396.87）（适用于台式机）和chrome / safari（适用于android / ios）上运行。到目前为止，我已经测试过。

Answer 10

如果您不反对使用现有解决方案，FontAwesome会在您的标记中使用图标字体中的此字形和其他字形：http://fortawesome.github.io/Font-Awesome/#icon/icon-chevron-down

您可以像这样使用它（在按照说明包含所需文件后）：

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

Answer 11

好的，所以我需要能够 重复使用 雪佛龙而无需重复ID。。这就是我想出来的（感谢Yenn）。（我的应用程序需要小型V形符号。）

它使用类而不是ID标记，也使用级联类将其向左翻转。。。而不是加倍我的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/

Answer 12

我发现所有这些解决方案都比我想要的更复杂和/或更灵活（在大小和/或厚度方面），所以我想分享我使用的代码。我还包含一个Hover状态用于链接。

Link to Fiddle

<强> 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>

Answer 13

CSS3-free，带边框的老式学校：

＆＃13;

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

＆＃13;

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

＆＃13;

在CSS中创建一个V形

13 个答案:

使用CSS边框