纯css实现三角形(带边框阴影)

1、普通三角形

/**
 * 箭头指向的反方向的颜色设置为你想要的,然后箭头方向不要写,另外两个方向的颜色设置为transperent透明
 * 可以通过改变上下左右4个方向上的boderwidth来实现等腰 等边 和其他三角形
 */
.triangle {
    border-style: solid;
    border-width: 10px;
    border-color: transparent transparent #f60 transparent;
}

效果:


2、带边框的三角形

/**
 * 带边框的三角形其实是通过两个三角形叠加形成的
 */
 .triangle {
     display:block;
     width:0;
     height:0;
     border-width:10px;
     border-style:solid;
     border-color:transparent #f60 transparent transparent;
     position:absolute;
     top:8px;
     left:-20px;
 }
 .triangle :after{
     content: '';
     display:block;
     width:0;
     height:0;
     border-width: 10px;
     border-style:solid;
     border-color:transparent #fff transparent transparent;
     position:absolute;
     top:-10px;
     left:-9px;
 }
 

效果:


3、带阴影的三角形

/**
 * 带阴影的三角形通过在一个模糊的三角形上叠加一个正常的三角形实现
 */
 .triangle {
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
     border-bottom: 10px solid #f60;
     position: absolute;
     top: -10px;
     left: 50%;
     margin-left: -10px;
 }
 .triangle:after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
     border-bottom: 10px solid #000;
     position: absolute;
     margin-left: -10px;
     z-index: -1;
     filter: blur(2px);
 }

效果:

  • 支付宝二维码 支付宝
  • 微信二维码 微信

本文地址: /css-triangle-2.html

版权声明: 本文为原创文章,版权归 逐梦个人博客 所有,欢迎分享本文,转载请保留出处!

相关文章