如何画一个三角形 - CSS三角形如何工作?




div三角形 (12)

CSS技巧中有很多不同的CSS形状- CSS的形状,我特别困惑于三角形:

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}
<div id="triangle-up"></div>

它如何以及为什么起作用?


CSS三角形:五幕中的悲剧

正如亚历克斯所说 ,等宽的边界以45度的角度彼此对接:

当你没有上边框时,它看起来像这样:

然后你给它的宽度为0 ...

...和0的高度...

...最后,你让两边的边框透明:

这导致了一个三角形。


SASS(SCSS)三角混合

我写这个让它更容易(和DRY)自动生成一个CSS三角形:

// Triangle helper mixin (by Yair Even-Or)
// @param {Direction} $direction - either `top`, `right`, `bottom` or `left`
// @param {Color} $color [currentcolor] - Triangle color
// @param {Length} $size [1em] - Triangle size
@mixin triangle($direction, $color: currentcolor, $size: 1em) {
  $size: $size/2;
  $transparent: rgba($color, 0);
  $opposite: (top:bottom, right:left, left:right, bottom:top);

  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border: $size solid $transparent;
  border-#{map-get($opposite, $direction)}-color: $color;
  margin-#{$direction}: -$size;
}

用例示例:

span {
  @include triangle(bottom, red, 10px);
}

游乐场页面

重要的提示:
如果三角形在某些浏览器中看起来像素化 ,请尝试下面介绍的其中一种方法。


好的,这个三角形会因为元素的边界在HTML和CSS中一起工作而被创建...

由于我们通常使用1或2像素边框,所以我们从不会注意到边框与相同宽度的45度角彼此相交 ,并且如果宽度发生变化,角度也会发生变化,请运行我在下面创建的CSS代码:

.triangle {
  width: 100px;
  height: 100px;
  border-left: 50px solid black;
  border-right: 50px solid black;
  border-bottom: 100px solid red;
}
<div class="triangle">
</div>

然后在下一步中,我们没有任何宽度或高度,如下所示:

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid black;
  border-right: 50px solid black;
  border-bottom: 100px solid red;
}
<div class="triangle">
</div>

现在,我们使左右边框不可见,使我们所需的三角形如下所示:

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}
<div class="triangle"></div>

如果您不想运行该代码段来查看步骤,我已经创建了一个图像序列来查看一个图像中的所有步骤:


不同的方法。 线性渐变(对于IE,只有IE 10+)。 你可以使用任何角度:

.triangle {
    margin: 50px auto;
    width: 100px;
    height: 100px;
/* linear gradient */
    background: -moz-linear-gradient(-45deg,  rgba(255,0,0,0) 0%, rgba(255,0,0,0) 50%, rgba(255,0,0,1) 50%, rgba(255,0,0,1) 100%);
 /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,0,0,0)), color-stop(50%,rgba(255,0,0,0)), color-stop(50%,rgba(255,0,0,1)), color-stop(100%,rgba(255,0,0,1)));
 /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* IE10+ */
    background: linear-gradient(135deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* W3C */;
}
<div class="triangle"></div>

这里是jsfiddle


从一个基本的正方形和边界开始。 每个边界将被赋予不同的颜色,所以我们可以将它们区分开来:

.triangle {
    border-color: yellow blue red green;
    border-style: solid;
    border-width: 200px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

这给你this

this

但是不需要顶部边框,因此将其宽度设置为0px 。 现在我们的200px边界将使我们的三角形高度为200px。

.triangle {
    border-color: yellow blue red green;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

我们会得到this

this

然后要隐藏两个三角形,请将边框颜色设置为透明。 由于顶部边界已被有效删除,因此我们可以将边框顶部颜色设置为透明。

.triangle {
    border-color: transparent transparent red transparent;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

最后我们得到this

this


其他人已经解释得很好。 让我给你一个快速解释这个动画的动画http://codepen.io/chriscoyier/pen/lotjh : http://codepen.io/chriscoyier/pen/lotjh

这里有一些代码供你玩并学习概念。

HTML:

<html>
  <body>
    <div id="border-demo">
    </div>
  </body>
</html>

CSS:

/*border-width is border thickness*/
#border-demo {
    background: gray;
    border-color: yellow blue red green;/*top right bottom left*/
    border-style: solid;
    border-width: 25px 25px 25px 25px;/*top right bottom left*/
    height: 50px;
    width: 50px;
}

玩这个,看看会发生什么。 将高度和宽度设置为零。 然后删除顶部边框并使左右透明,或者只需查看下面的代码即可制作一个css三角形:

#border-demo {
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid blue;
}

可以说我们有以下div:

<div id="triangle" />

现在逐步编辑CSS,以便您清楚了解周围发生的事情

第1 JSfiddle链接:

 #triangle {
        background: purple;
        width :150px;
        height:150PX;
        border-left: 50px solid black ;
        border-right: 50px solid black;
        border-bottom: 50px solid black;
        border-top: 50px solid black;
    }

这是一个简单的div。 用一个非常简单的CSS。 所以一个外行人可以理解。 Div的尺寸为150 x 150像素,边框为50像素。 附图:

第2 JSfiddle链接:

#triangle {
    background: purple;
    width :150px;
    height:150PX;
    border-left: 50px solid yellow ;
    border-right: 50px solid green;
    border-bottom: 50px solid red;
    border-top: 50px solid blue;
}

现在我只是改变了所有四面的边框颜色。 图像被附上。

STEP:3 JSfiddle链接:

#triangle {
    background: purple;
    width :0;
    height:0;
    border-left: 50px solid yellow ;
    border-right: 50px solid green;
    border-bottom: 50px solid red;
    border-top: 50px solid blue;
}

现在我只是将div的高度和宽度从150像素更改为零。 图像被附上

第4 JSfiddle:

#triangle {
    background: purple;
    width :0px;
    height:0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
    border-top: 50px solid transparent;
}

现在我已经把所有的边界都从底部边界透明化了。 图片附在下面。

第5 JSfiddle链接:

#triangle {
    background: white;
    width :0px;
    height:0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
    border-top: 50px solid transparent;
}

现在我只是将背景颜色更改为白色。 图像被附上。

因此我们得到了我们需要的三角形。




考虑下面的三角形

.triangle {
    border-bottom:15px solid #000;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    width:0;
    height:0;
}

这就是我们所得到的:

为什么它以这种形式出现? 下图解释了尺寸,注意15px用于下边框,10px用于左右。

通过去除右边框也可以很容易地制作直角三角形。


这是一个古老的问题,但我认为值得分享如何使用这种三角形技术创建箭头。

步骤1:

让我们创建2个三角形,第二个我们将使用:after伪类之后,将它定位在另一个之下:

.arrow{
    width: 0;
    height: 0;
    border-radius: 50px;
    display: inline-block;
    position: relative;
}

    .arrow:after{
        content: "";
        width: 0;
        height: 0;
        position: absolute;
    }


.arrow-up{
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 50px solid #333;
}
    .arrow-up:after{
         top: 5px;
         border-left: 50px solid transparent;
         border-right: 50px solid transparent;
         border-bottom: 50px solid #ccc;
         right: -50px;
    }
<div class="arrow arrow-up"> </div>

第2步

现在我们只需将第二个三角形的主要边框颜色设置为背景的相同颜色即可:

.arrow{
    width: 0;
    height: 0;
    border-radius: 50px;
    display: inline-block;
    position: relative;
}

    .arrow:after{
        content: "";
        width: 0;
        height: 0;
        position: absolute;
    }


.arrow-up{
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 50px solid #333;
}
    .arrow-up:after{
         top: 5px;
         border-left: 50px solid transparent;
         border-right: 50px solid transparent;
         border-bottom: 50px solid #fff;
         right: -50px;
    }
<div class="arrow arrow-up"> </div>

拨弄所有箭头:
http://jsfiddle.net/tomsarduy/r0zksgeu/


这里是另一个小提琴:

.container:after {
    position: absolute;
    right: 0;
    content: "";
    margin-right:-50px;
    margin-bottom: -8px;
    border-width: 25px;
    border-style: solid;
    border-color: transparent transparent transparent #000;
    width: 0;
    height: 0;
    z-index: 10;
    -webkit-transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out;
    transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out;
    bottom: 21px;
}
.container {
    float: left;
    margin-top: 100px;
    position: relative;
    width: 150px;
    height: 80px;
    background-color: #000;
}

.containerRed {
    float: left;
    margin-top: 100px;
    position: relative;
    width: 100px;
    height: 80px;
    background-color: red;
}

https://jsfiddle.net/qdhvdb17/







css-shapes