HTML+CSS制作三角形

最新推荐文章于 2024-11-01 15:19:31 发布

Ensoleile2021

最新推荐文章于 2024-11-01 15:19:31 发布

阅读量127

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_51525398/article/details/119359356

版权

制作三角新（用伪元素实现）

三角形
1. 宽度和高度都设置为0
3. 四周的边框都设置透明 border:30px solid transparent;
4. 留下对方向的边框，设置具体的边框颜色

  <style>
        *{ margin: 0;padding: 0;}
       div{
         margin: 50px auto;
         width: 320px;height: 32px;
         background-color: #3579ff;
         background-image:linear-gradient(to right,#3579ff,#86cdfa);
         font-size: 18px;
         text-align: center;line-height: 32px;
         color: white;
       } 
       div::before{
           content: "";
           margin: 50px auto;
           width: 0px;height: 0px;
           border: 16px solid transparent;
           position: absolute;
           left: 479px;top: 0;
           border-left: 16px solid white;
       }
       div::after{
           content: "";
           margin: 50px auto;
           width: 0px;height: 0px;
           border: 16px solid transparent;
           position: absolute;
           right: 479px;top: 0;
           border-right: 16px solid white;
       }
    </style>
    <body>
  		  <div>在线教程</div>
    </body>