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


Posted in HTML / CSS onAugust 03, 2020

具体代码如下所示:

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;
}

小程序示例

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

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 实现三角形边框内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
纯CSS实现预加载动画效果
Sep 06 HTML / CSS
IE滤镜与CSS3效果(详细整理分享)
Jan 25 HTML / CSS
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
May 09 HTML / CSS
css3 transform及原生js实现鼠标拖动3D立方体旋转
Jun 20 HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
Dec 01 HTML / CSS
详解H5本地储存Web Storage
Jul 03 HTML / CSS
HTML5中drawImage用法分析
Dec 01 HTML / CSS
HTML5的新特性(1)
Mar 03 HTML / CSS
canvas与html5实现视频截图功能示例
Dec 15 HTML / CSS
CSS3 制作精美的定价表
Apr 06 HTML / CSS
CSS+HTML 实现顶部导航栏功能
Aug 30 HTML / CSS
分享几个实用的CSS代码块
Jun 10 HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
Jul 16 #HTML / CSS
css3实现小箭头各种图形效果
Jul 08 #HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
Jun 22 #HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
Jun 22 #HTML / CSS
CSS3 box-shadow属性实例详解
Jun 19 #HTML / CSS
CSS3新增布局之: flex详解
Jun 18 #HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
Jun 17 #HTML / CSS
You might like
thinkPHP中session()方法用法详解
2016/12/08 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
javascript 静态对象和构造函数的使用和公私问题
2010/03/02 Javascript
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
jQuery常见开发技巧详细整理
2013/01/02 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
javascript运动详解
2015/07/06 Javascript
Windows 系统下设置Nodejs NPM全局路径
2016/04/26 NodeJs
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
python清理子进程机制剖析
2017/11/23 Python
Scrapy使用的基本流程与实例讲解
2018/10/21 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
详解Numpy数组转置的三种方法T、transpose、swapaxes
2019/05/27 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
Django用户认证系统 User对象解析
2019/08/02 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
Pandas数据分析的一些常用小技巧
2021/02/07 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
2021/01/25 HTML / CSS
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
会计电算化大学生职业规划书
2014/02/05 职场文书
建议书的格式
2014/05/12 职场文书
求职信范文大全
2014/05/26 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
聚会通知怎么写
2015/04/23 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
青年岗位能手事迹材料(2016推荐版)
2016/03/01 职场文书