首页 文章

CSS三角形如何工作？

提问于
浏览 次
1685

CSS Tricks - Shapes of CSS上有很多不同的CSS形状，我对三角形感到特别困惑：

CSS Triangle

#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 css3 geometry polygon css-shapes

17 回答

  • 2102

    其他人已经很好地解释了这一点让我给你一个 animation ，这将很快解释：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;
}
    回复于
  • 223

    CSS三角：五幕中的悲剧

    当alex said时，相等宽度的边界以45度角相互对接：

    borders meet at 45 degree angles, content in middle

    如果没有顶部边框，它看起来像这样：

    no top border

    那你给它宽度为0 ......

    no width

    ...和0的高度......

    no height either

    ......最后，你让两个边框透明：

    transparent side borders

    这导致了一个三角形 .

    回复于
  • 35

    这是我为演示创建的animation in JSFiddle .

    另请参阅下面的代码段 .

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

    Animated Gif of Triangle

    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>

    随机版

    /**
 * Randomize array element order in-place.
 * Using Durstenfeld shuffle algorithm.
 */
function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

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'},
         {'borderLeftColor'     :'transparent'},
         {'borderRightColor'    :'transparent'}
];
transforms = shuffleArray(transforms)



$('#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: 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>

    一次性版本

    $('#a').click(function() {$('.border').trigger("click");});
(function($) {
    var duration = 1000
    $('.border').click(function() {
        $(this)
         .animate({'border-top-width': 0            ,
         					 'border-left-width': 30          ,
         					 'border-right-width': 30         ,
         					 'border-bottom-width': 80        ,
         					 'width': 0                       ,
         					 'height': 0                      ,
                   'margin-left': 100,
                   'margin-top': 150,
         					 'borderTopColor': 'transparent',
         					 'borderRightColor': 'transparent',
         					 'borderLeftColor':  'transparent'}, duration)
    }).end()
}(jQuery))

    .border {
    margin: 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>
    回复于
  • 444

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

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

    它给你this：

    square with four borders

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

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

    我们将得到this：

    bottom half of square with four borders

    然后隐藏两个边三角形，将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;
}

    最后我们得到this：

    triangular bottom border

    回复于
  • 29

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

    不要使用css技巧，不要忘记像html实体一样简单的解决方案：

    &#9650;

    结果：

    ▲

    见：What are the HTML entities for up and down triangles?

    回复于
  • 8

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

    由于我们通常使用1或2px边框，我们从未注意到边框会以相同的宽度为彼此制作 45° angles ，如果宽度发生变化，角度程度也会发生变化，运行我在下面创建的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>

    如果您不愿意运行代码段来查看步骤，我已经创建了一个图像序列来查看一个图像中的所有步骤：

    enter image description here

    回复于
  • 16

    不同的方法：

    CSS3三角形，变换旋转

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

    gif animation : how to make a triangle with transform rotate

    • 链接到 ANIMATION : How to make a CSS3 triangle .

    • 和 DEMO : CSS3 triangles 用变换旋转 .

    否则，这里是如何用一个元素制作等腰直角三角形的4个动作（这不是悲剧）的详细解释 .

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

    • 注意2：在以下代码段中，不包括供应商前缀 . 它们包含在codepen demos中 .

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

    第1步：制作一个div

    简单，只需确保 width = 1.41 x height . 您可以使用任何技术（see here），包括使用百分比和填充底部来保持纵横比并制作 responsive triangle . 在下图中，div具有金黄色边框 .

    在该div中，插入一个 pseudo element 并给它100％的父级宽度和高度 . 伪元素在下图中具有蓝色背景 .

    Making a CSS triangle with transform roate step 1

    此时，我们有这个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步：让我们旋转

    首先，最重要的是： define a transform origin . default origin位于伪元素的中心，我们需要它在左下角 . 通过将此CSS添加到伪元素：

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

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

    Creating a triangle with CSS3 step 2

    此时，我们有这个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; . 删除黄色边框后，你得到... TRIANGLE ！ ：

    DEMO

    CSS triangle

    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步：进一步......

    如demo所示，您可以自定义三角形：

    • 通过播放 skewX() 使它们变得更薄或更扁平 .

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

    • 使用3D转换属性制作some reflexion .

    • 给triangle borders

    • 放一张图片inside the triangle

    • 更多......释放CSS3的力量！

    为什么要使用这种技术？

    • 三角形可以很容易地响应 .

    • 你可以制作triangle with border .

    • 您可以保持三角形的边界 . 这意味着您只能在光标位于时触发悬停状态或单击事件 inside the triangle . 在某些情况下，这可以变得非常方便，例如this one，其中每个三角形可以't overlay it' s邻居，因此每个三角形都有自己的悬停状态 .

    • 你可以制作一些fancy effects like reflections .

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

    为什么不使用这种技术？

    • 主要缺点是 browser compatibility ，IE9支持2d转换属性，因此如果您计划支持IE8，则无法使用此技术 . 有关详细信息，请参阅CanIuse . 对于使用3d变换的一些奇特效果，如the reflection浏览器支持是IE10（更多信息请参见canIuse） .

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

    回复于
  • 9

    更进一步，使用基于此的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>
    回复于
  • 488

    这是另一个小提琴：

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

    回复于
  • 27

    考虑下面的三角形

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

    这就是我们给出的：

    Small triangle output

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

    Large triangle

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

    Right angle triangle

    回复于
  • 41

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

    第1步：

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

    2 triangles

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

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

    enter image description here

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

    回复于
  • 3

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

    游乐场页面

    Important note:
    如果在某些浏览器中三角形看起来像素化，请尝试here中描述的方法之一 .

    回复于
  • 163

    边框使用相交的倾斜边缘（45°角，宽度相等的边框，但更改边框宽度可能会使角度倾斜） .

    Border example

    jsFiddle .

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

    回复于
  • 3

    让我们说我们有以下div：

    <div id="triangle" />

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

    STEP 1: JSfiddle Link:

    #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像素 . 附图：

    enter image description here

    STEP 2: JSfiddle Link:

    #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个边的边框颜色 . 图像已附加 .

    enter image description here

    STEP:3 JSfiddle Link:

    #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像素更改为零 . 图像已附加

    enter image description here

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

    现在我已将所有边框与底部边框分开 . 图像附在下面 .

    enter image description here

    STEP 5: JSfiddle Link:

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

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

    enter image description here

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

    回复于
  • 14

    几乎所有的答案都集中在使用border构建的三角形上，所以我将详细阐述 linear-gradient 方法（在@lima_fil的答案中开始） .

    使用像 45° 这样的度数值将迫使我们尊重 height/width 的特定比率，以获得我们想要的三角形，这将不会响应：

    .tri {
  width:100px;
  height:100px;
  background:linear-gradient(45deg, transparent 50%,red 0);
  
  /*To illustrate*/
  border:1px solid;
}

    Good one
<div class="tri"></div>
bad one
<div class="tri" style="width:150px"></div>
bad one
<div class="tri" style="height:30px"></div>

    而不是这样做，我们应该考虑预定义的方向值，如 to bottom ， to top 等 . 在这种情况下，我们可以获得任何类型的三角形形状，同时保持响应 .

    1) Rectangle triangle

    要获得这样的三角形，我们需要一个线性渐变和一个对角线方向，如 to bottom right ， to top left ， to bottom left 等

    .tri-1,.tri-2 {
  display:inline-block;
  width:100px;
  height:100px;
  background:linear-gradient(to bottom left, transparent 49.8%,red 50%);
  border:1px solid;
  animation:change 2s linear infinite alternate;
}
.tri-2 {
  background:linear-gradient(to top right, transparent 49.8%,red 50%);
  border:none;
}

@keyframes change {
  from {
    width:100px;
    height:100px;
  }
  to {
    height:50px;
    width:180px;
  }
}

    <div class="tri-1"></div>
<div class="tri-2"></div>

    2) isosceles triangle

    对于这个，我们将需要2个线性渐变，如上所述，每个将采用宽度（或高度）的一半 . 这就像我们创建第一个三角形的镜像 .

    .tri {
  display:inline-block;
  width:100px;
  height:100px;
  background-image:
  linear-gradient(to bottom right, transparent 49.8%,red 50%),
  linear-gradient(to bottom left, transparent 49.8%,red 50%);
  background-size:50.5% 100%; /* I use a value slightly bigger than 50% to avoid having a small gap between both gradient*/
  background-position:left,right;
  background-repeat:no-repeat;
  
  animation:change 2s linear infinite alternate;
}


@keyframes change {
  from {
    width:100px;
    height:100px;
  }
  to {
    height:50px;
    width:180px;
  }
}

    <div class="tri"></div>

    3) equilateral triangle

    这个有点棘手，因为我们需要保持高度和宽度之间的关系渐变 . 我们将具有与上面相同的三角形，但是为了将等腰三角形变换为等边三角形，我们将使计算更复杂 .

    为了方便起见，我们将考虑div的宽度是已知的，并且高度足够大，以便能够在内部绘制三角形（ height >= width ） .

    enter image description here

    我们有两个渐变 g1 和 g2 ，蓝线是 div w 的宽度，每个渐变都有50％（ w/2 ），三角形的每一边都应该等于 w . 绿线是两个渐变 hg 的高度，我们可以轻松获得以下公式：

    (w/2)² + hg² = w² ---> hg = (sqrt(3)/2) * w ---> hg = 0.866 * w

    我们可以依靠 calc() 来进行计算并获得所需的结果：

    .tri {
  --w:100px;
  width:var(--w);
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 49.8%,red 50%),
  linear-gradient(to bottom left, transparent 49.8%,red 50%);
  background-size:calc(var(--w)/2 + 0.5%)  calc(0.866 * var(--w));
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
}

    <div class="tri"></div>
<div class="tri" style="--w:80px"></div>
<div class="tri" style="--w:50px"></div>

    另一种方法是控制div的高度并保持渐变的语法：

    .tri {
  --w:100px;
  width:var(--w);
  height:calc(0.866 * var(--w));
  display:inline-block;
  background:
   linear-gradient(to bottom right, transparent 49.8%,red 50%) left,
   linear-gradient(to bottom left,  transparent 49.8%,red 50%) right;
  background-size:50.2% 100%;
  background-repeat:no-repeat;
  
}

    <div class="tri"></div>
<div class="tri" style="--w:80px"></div>
<div class="tri" style="--w:50px"></div>

    4) Random triangle

    要获得一个随机三角形，它很容易，因为我们只需要删除每个50％的条件但是我们应该保持两个条件（两者都应该具有相同的高度，并且两个宽度的总和应该是100％） .

    .tri-1 {
  width:100px;
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 50%,red 0),
  linear-gradient(to bottom left, transparent 50%,red 0);
  background-size:20% 60%,80% 60%;
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
 
}

    <div class="tri-1"></div>

    但是如果我们想为每一方定义一个值呢？我们只需要再做一次计算！

    enter image description here

    让我们将 hg1 和 hg2 定义为渐变的高度（两者都等于红线），然后 wg1 和 wg2 作为渐变的宽度（ wg1 + wg2 = a ） . 我不打算详细说明计算，但最后我们将：

    wg2 = (a²+c²-b²)/(2a)
wg1 = a - wg2
hg1 = hg2 = sqrt(b² - wg1²) = sqrt(c² - wg2²)

    现在我们已经达到了CSS的极限，即使使用 calc() ，我们也无法实现这一点，所以我们只需要手动收集最终结果并将它们用作固定大小：

    .tri {
  --wg1: 20px; 
  --wg2: 60px;
  --hg:30px; 
  width:calc(var(--wg1) + var(--wg2));
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 50%,red 0),
  linear-gradient(to bottom left, transparent 50%,red 0);

  background-size:var(--wg1) var(--hg),var(--wg2) var(--hg);
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
}

    <div class="tri" ></div>

<div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;" ></div>

    Bonus

    我们不应该忘记我们也可以应用旋转和/或倾斜，我们有更多的选择来获得更多的三角形：

    .tri {
  --wg1: 20px; 
  --wg2: 60px;
  --hg:30px; 
  width:calc(var(--wg1) + var(--wg2));
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 50%,red 0),
  linear-gradient(to bottom left, transparent 50%,red 0);

  background-size:var(--wg1) var(--hg),var(--wg2) var(--hg);
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
}

    <div class="tri" ></div>

<div class="tri" style="transform:skewY(25deg)"></div>

<div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;" ></div>


<div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;transform:rotate(20deg)" ></div>

    当然，我们应该记住SVG solution，它在某些情况下更合适：

    svg {
 width:100px;
 height:100px;
}

polygon {
  fill:red;
}

    <svg viewBox="0 0 100 100"><polygon points="0,100 0,0 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="0,100 50,0 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="0,100 50,23 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="20,60 50,43 80,100" /></svg>
    回复于
  • 9

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

    回复于
  • 5

    CSS剪辑路径

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

    简介中的clip-path剪切路径属性类似于从矩形纸上剪切形状（如圆形或五边形） . 该属性属于“CSS Masking Module Level 1”规范 . 该规范指出，“CSS掩蔽为部分或完全隐藏视觉元素的部分提供了两种方法：掩蔽和剪裁” . 来自Smashing Magazine的摘录

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

    三角形状示例

    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>

    下行

    它确实有一个主要的缺点，一个是它主要缺乏支持，只是在 -webkit- 浏览器中真正被覆盖并且在IE上没有支持而且在FireFox中只是非常偏向 .

    资源

    以下是一些有用的资源和材料，有助于更好地理解 clip-path 并开始创建自己的资源和材料 .

    回复于

相关问题