纯CSS3+DIV实现小三角形边框效果的示例代码

具体代码如下所示：

传统文化故事html代码是这样的<div class="arrow-up">     <!--向上的三角--></div><相宜的意思div c甘肃交通职业技术学院lass="arrow-down">    <!--向下的三角--></div><div class="arrow-left">    <!--向左的三角--></div><div class="arrow-right">    <!--向右的三角--></div> 下面用css3分别实现向上、下、左、右的三角形/*箭头向上*/.arrow-up {    width:0;    height:0;    border-left:30px solid transparent;    border-right:30px solid transparent;    border-bottom:30px solid #fff;}     /*箭头向下*/.arrow-down {    width:0;    height:0;    border-left:20px solid transparent;    border-right:20px solid transparent;    border-top:20px solid #0066cc;}     /*箭头向左*/.arrow-left {    width:0;    height:0;    border-top:30px solid transparent;    border-bottom:30px solid transparent;    border-right:30px solid yellow;}   /*箭头向右*/.arrow-right {    width:0;    height:0;    border-top:50px solid transparent;    border-bottom: 50px solid transparent;    border-left: 50px solid green;}

小程序示例

wxml

<view class="index_sale_lists">      <view class="sanjiao"></view>      <view class="index_sale_list">        <view class="index_sale_choice">你已选择：<text>上脑</text></view>        <view class="index_sale_tezhi">          <text>            特质：牛上脑是位于肩颈部靠后，脊骨两侧的牛肉，肉质细嫩多汁，脂肪杂交均匀，有好看的大理石花纹，口感绵软，入口即化，脂肪低而蛋白质含量高，适合涮火锅，可煎炸，炸和烧烤。          </text>        </view>      </view>    </view>

wxss

.index_sale_lists{  margin: 50rpx 24rpx 0;  background-color: #f2f6f4;  border-radius: 20rpx;  position: relative;}.sanjiao{    position: absolute;    left: 50%;   动能公式 top:-15rpx;    width:0;    height:0;    border-left:10px solid transparent;    border-right:10px solid transparent;    border-bottom:10px solid #f2f6f4;    /* z-ind单位制ex:-1; */}

总结

到此这篇关于纯css3+div实现小三角形边框的文章就介绍到这了,更多相关css div 实现三角形边框内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章，希望大家以后多多支持www.887551.com！