提问



在CSS Tricks上有很多不同的CSS形状 - CSS和我的形状特别困惑于三角形:[54]







#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的高度......





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





这导致了一个三角形。

最佳参考


边框使用相交的倾斜边缘(45°角,宽度相等的边框,但更改边框宽度可能会使角度倾斜)。





jsfiddle。[56]


通过隐藏某些边框,您可以获得三角效果(如上所示,通过使不同部分的颜色不同)。 transparent通常用作边缘颜色以实现三角形。

其它参考1


从基本方块和边框开始。每个边框都会有不同的颜色,所以我们可以区分它们:


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


它给你这个:[57]


[58]


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


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


我们会得到这个:[59]


[60]


然后隐藏两个边三角形,将border-color设置为透明。由于顶部边框已被有效删除,我们也可以将border-top-color设置为透明。


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


最后我们得到了这个:[61]


[62]

其它参考2


不同的方法:


CSS3三角形,变换旋转



使用这种技术很容易制作三角形。对于那些喜欢看动画解释这种技术如何在这里工作的人来说:






  • 链接到动画:如何制作 CSS3 三角形

  • DEMO: CSS3 三角形,使用变换旋转。



否则,这里有4个行为的详细解释(这不是一个悲剧),如何用一个元素制作等腰直角三角形。[63] [64]



  • 注1:对于非等腰三角形和花哨的东西,你可以看到第4步。

  • 注意2:在以下代码段中,不包含供应商前缀。它们包含在codepen演示中。

  • 注3:以下说明的HTML始终为: <div class="tr"></div>






第1步:制作div



简单,只需确保width = 1.41 x height。您可以使用任何技术(参见此处),包括使用百分比和填充底部来保持纵横比并制作响应三角形。在下图中,div有一个金黄色的边框。[65]


在该div中,插入伪元素并为其指定父级的100%宽度和高度。伪元素在下图中具有蓝色背景。





此时,我们有 CSS :


.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
}

.tr: before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0079C6;
}


第2步:让我们旋转



首先,最重要的是:定义转换起源。默认原点位于伪元素的中心,我们需要在左下角。通过将此 CSS 添加到伪元素:[67]


transform-origin:0 100%;transform-origin: left bottom;


现在我们可以用transform : rotate(45deg);顺时针旋转伪元素45度





此时,我们有 CSS :


.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
}

.tr:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0079C6;
    transform-origin: 0 100%;        
    transform: rotate(45deg);
}


第3步:隐藏它



要隐藏伪元素的不需要的部分(使用黄色边框溢出div的所有部分),您只需要在容器上设置overflow:hidden;。删除黄色边框后,您会得到一个三角形! :


样本 [68]





CSS:


.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
    overflow: hidden;
}

.tr:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0079C6;
    transform-origin: 0 100%;
    transform: rotate(45deg);
}


第4步:进一步......



如演示所示,您可以自定义三角形:[69]



  1. 通过skewX()播放使它们更薄或更扁平。

  2. 通过使用变换对准和旋转方向使它们指向左,右或任何其他方向。

  3. 使用3D变换属性做一些反思。

  4. 给出三角形边框

  5. 将图像放在三角形内

  6. 更多......释放 CSS3 的力量!






为什么要使用这种技术?




  1. 三角形很容易响应。

  2. 您可以制作带边框的三角形。

  3. 您可以保持三角形的边界。这意味着只有当光标在三角形内 时才能触发悬停状态或单击事件。在某些情况下,这可以变得非常方便,因为每个三角形都不能覆盖它的邻居,所以每个三角形都有自己的悬停状态。

  4. 你可以做一些像反射这样的奇特效果。

  5. 它将帮助您理解2d和3d变换属性。



为什么不使用这种技术?




  1. 主要缺点是浏览器兼容性,IE9 +支持2d转换属性,因此如果您计划支持IE8,则无法使用此技术。有关详细信息,请参阅CanIuse。使用3D变换的奇特效果,如反射浏览器支持,是IE10 +(有关详细信息,请参阅canIuse)。

  2. 你不需要任何响应,一个普通的三角形对你来说很好,那么你应该去寻找这里解释的边界技术:更好的浏览器兼容性和更容易理解,这要归功于这里的惊人帖子。


其它参考3


这是我为JSFiddle创建的用于演示的动画。[70] [71] [72] [73] [74] [75] [76] [77]]] [78] [79] [80]


另请参阅下面的代码段。


这是一个由Screencast制作的动画GIF


[81]




transforms = [
         {'border-left-width'   :'30', 'margin-left': '70'},
         {'border-bottom-width' :'80'},
         {'border-right-width'  :'30'},
         {'border-top-width'    :'0', 'margin-top': '70'},
         {'width'               :'0'},
         {'height'              :'0', 'margin-top': '120'},
         {'borderLeftColor'     :'transparent'},
         {'borderRightColor'    :'transparent'}
];


$('#a').click(function() {$('.border').trigger("click");});
(function($) {
    var duration = 1000
    $('.border').click(function() {
		  for ( var i=0; i < transforms.length; i++ ) {
        $(this)
         .animate(transforms[i], duration)
		  }
    }).end()
}(jQuery))

.border {
    margin: 20px 50px;
    width: 50px;
    height: 50px;
    border-width: 50px;
    border-style: solid;
    border-top-color: green;
    border-right-color: yellow;
    border-bottom-color: red;
    border-left-color: blue;
    cursor: pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>



让我们说我们有以下div:


<div id="triangle" />


现在逐步编辑CSS,这样您就可以清楚地了解周围发生的事情


第1步:
JSfiddle链接:[82]


 #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链接:[83]


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


现在我只改变了所有4个边的边框颜色。图像已附加。





STEP:3 JSfiddle链接:[84]


#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:[85]


#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链接:[86]


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


现在我只是将背景颜色改为白色。图像已附加。





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

其它参考4


而现在完全不同的东西......


而不是使用CSS技巧,不要忘记像html实体一样简单的解决方案:


&#9650;


结果:





请参阅:上下三角形的HTML实体是什么?

其它参考5


考虑下面的三角形


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


这就是我们给出的:





为什么它出现在这种形状?下图解释了尺寸,请注意15px用于底部边框,10px用于左侧和右侧。





通过去除右边界也很容易制作一个直角三角形。




其它参考6


更进一步,使用基于此的CSS我向后面和下一个按钮添加了箭头(是的,我知道它不是100%跨浏览器,但是光滑一点也不少)。




.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  margin:20px auto;
}

.triangle-down {
  border-bottom:none;
  border-top: 100px solid red;
}

.triangle-left {
  border-left:none;
  border-right: 100px solid red;
  border-bottom: 50px solid transparent;
  border-top: 50px solid transparent;
}

.triangle-right {
  border-right:none;
  border-left: 100px solid red;
  border-bottom: 50px solid transparent;
  border-top: 50px solid transparent;
}

.triangle-after:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid red;
  margin:0 5px;
  content:"";
  display:inline-block;
}

.triangle-after-right:after {
  border-right:none;
  border-left: 5px solid blue;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;

}

.triangle-before:before {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid blue;
  margin:0 5px;
  content:"";
  display:inline-block;
}

.triangle-before-left:before {
  border-left:none;
  border-right: 5px solid blue;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;

}

<div class="triangle"></div>
<div class="triangle triangle-down"></div>
<div class="triangle triangle-left"></div>
<div class="triangle triangle-right"></div>

<a class="triangle-before triangle-before-left" href="#">Back</a>
<a class="triangle-after triangle-after-right" href="#">Next</a>



不同的方法。使用线性渐变(对于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>



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


第1步:



让我们创建2个三角形,对于第二个,我们将使用:after伪类并将其放置在另一个下面:


[88]




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



CSS clip-path



这是我觉得这个问题遗漏的事情; clip-path



   clip-path简而言之

  
  具有clip-path属性的剪切类似于从矩形纸上切割形状(如圆形或五边形)。该属性属于CSS Masking Module Level 1规范。该规范指出,CSS掩蔽为部分或完全隐藏视觉元素的部分提供了两种方法:掩蔽和剪裁。[89]

  
  

      
  • Smashing Magazine摘录

  •   






clip-path将使用元素本身而不是其边框来剪切您在其参数中指定的形状。它使用一个超级简单的基于百分比的坐标系统,这使得编辑非常容易,这意味着你可以在几分钟内拾起并创建奇怪而美妙的形状。[90]





三角形状示例





div {
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: red;
  width: 100px;
  height: 100px;
}

<div></div>



好的,这个三角形将被创建,因为元素的边框在HTML和CSS中一起工作的方式...


由于我们通常使用1或2px边框,我们从未注意到边框与相同宽度的彼此形成 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>



SASS(SCSS)三角混合



我写这篇文章是为了让它更容易(和干)自动生成一个CSS三角形:[91]


// 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);
}


游乐场页面






重要说明:
如果在某些浏览器中三角形似乎像素化,请尝试此处描述的方法之一。[92] [93]

其它参考7


我在enjoycss中做了一个样本


http://enjoycss.com/5p#border[94]


你可以玩它,看看事情是如何变化的;)




其它参考8


这是另一个小提琴:


.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/[95]

其它参考9


其他人已经很好地解释了这一点让我给你一个动画,这将很快解释:http://codepen.io/chriscoyier/pen/lotjh [96]


这里有一些代码供您玩和学习概念。


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