css三角形(两种方式)

第一种:border+transparent

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .triangle {
            width:0;
            height:0;
            border-left:10px solid transparent;
            border-right:10px solid transparent;
            border-bottom: 20px solid red;
        }
    </style>
</head>

<body>
    <!--    border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        
            border-right:10px solid blue;
            border-top:10px solid red;
            border-bottom:10px solid green;
        -->
        <div class="triangle"></div>
</body>

</html>

用border中的transparent实现部分样式透明,加下边框样式。因为左右边框都是透明,而上边框还没有样式,则可以实现一个三角形的样式。

第二种border+rgb

<!DOCTYPE html>
<html>
<head>
  <style>
    .sanjiao {
        width:0;
        height:0;
        border:10px solid white;
        border-right:5px solid rgb(0, 0, 0,0);
        border-left:5px solid rgb(0,0,0,0);
        border-bottom:10px solid red;
    }
  </style>
</head>
<body>
  <div class="sanjiao"></div>

</body>
</html>

rgb第四个属性是透明度,设置为0就是透明,本质和transparent有一样的效果.

你可能感兴趣的:(web前端,css,前端,css3)