纯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 相关文章推荐
CSS3混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
css3实例教程 一款纯css3实现的环形导航菜单
Oct 20 HTML / CSS
详解CSS3选择器的使用方法汇总
Nov 24 HTML / CSS
使用CSS3设计地图上的雷达定位提示效果
Apr 05 HTML / CSS
css3 clip实现圆环进度条的示例代码
Feb 07 HTML / CSS
纯css3使用vw和vh实现自适应的方法
Feb 09 HTML / CSS
CSS3 实现飘动的云朵动画
Dec 01 HTML / CSS
html5中localStorage本地存储的简单使用
Jun 16 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
Jan 07 HTML / CSS
HTML5 input placeholder 颜色修改示例
May 30 HTML / CSS
使用phonegap操作数据库的实现方法
Mar 31 HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 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
杏林同学录(六)
2006/10/09 PHP
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
php商品对比功能代码分享
2015/09/24 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
学习js所必须要知道的一些
2007/03/07 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
js编码、解码函数介绍及其使用示例
2013/09/05 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
js选项卡的制作方法
2017/01/23 Javascript
详解Angular.js中$http拦截器的介绍及使用
2017/07/04 Javascript
vue组件之Alert的实现代码
2017/10/17 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
优化Python代码使其加快作用域内的查找
2015/03/30 Python
Python获取央视节目单的实现代码
2015/07/25 Python
深入理解Python中range和xrange的区别
2017/11/26 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
Python OpenCV实现视频分帧
2019/06/01 Python
PyCharm安装Markdown插件的两种方法
2019/06/24 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
python3安装crypto出错及解决方法
2019/07/30 Python
python支付宝支付示例详解
2019/08/22 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
Linux操作面试题
2015/02/11 面试题
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
工地安全质量标语
2014/06/07 职场文书
模具专业求职信
2014/06/26 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
小学毕业感言100字
2015/07/30 职场文书
python如何读取.mtx文件
2021/04/22 Python
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis