具体代码如下所示:
html代码是这样的 <div class="arrow-up"> <!--向上的三角--> </div> <div class="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-index:-1; */ }
总结
到此这篇关于纯CSS3+DIV实现小三角形边框的文章就介绍到这了,更多相关css div 实现三角形边框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
Tables的缺点 1、Table要比其它html标记占更多的字节。(延迟下载时间,占用服务...
以 图片所示的效果为例,显然我们不仅要使下一步文本水平居中,还要垂直居中,此...
CSS背景: background:#00ffee; //设置背景颜色 background-image:url(*.jpg); //...
命令简介 atop 命令是一款监控 Linux 系统资源与进程的工具,非内部命令,需要安...
很多时候,我们在布置游戏地图或者动漫场景的时候,需要模拟火焰,树丛,云朵等...
Dreamweaver设计网页的时候,想要实现一个网页内含有两个或多个页面,该怎么实现...
给大家分享一个用CSS 3.0实现的文字悬停跳动特效,效果如下: 以下是代码实现,...
我们通常在做图片上传的时候都会遇上这样的情况,一是后端接口限制上传图片的大...
下面介绍一下div嵌套div时margin不起作用的解决方案。 顺便科普下margin的定义和...
在开发建设网站的过程中,也许我们会遇到这样的情况,当我们的网站已经进行了相...