用邊框寫一個有尖角的圖形
阿新 • • 發佈:2019-03-28
col dea left ont 邊框 osi label posit lin
效果圖
css:
.wrap{ display: flex; justify-content: center; } .label_item{ display: flex; align-items: center; } .label_empty{ width: 0; height: 0; border-bottom:17rpx solid transparent; border-right: 17rpx solid #d2d2d2; border-top: 17rpx solid transparent; position: relative; } .icon{ display: block; width: 0; height: 0; border-bottom: 25rpx solid transparent; border-right: 25rpx solid #fff; border-top: 25rpx solid transparent; position: absolute; left: 2rpx; top: -24rpx; display: inline-block; } .idea{ height: 26rpx; line-height: 26rpx; padding-left: 10rpx; padding-right: 10rpx; border: 1rpx solid #d2d2d2; font-size: 18rpx; color: #90c42f; border-left: none; display: inline-block; position: relative; }
.wxml:
<view class=‘wrap‘> <view class=‘label_item‘> <view class=‘label_empty‘> <view class=‘icon‘></view> </view> <view class=‘idea‘>標簽</view> </view> </view>
用邊框寫一個有尖角的圖形