用css编写三角和半圆形状样式
2024-09-01 20:35:53
1.三角样式
htriangle-down {
height:;
border-left:11rpx solid transparent;
border-right:11rpx solid transparent;
border-top:12rpx solid #475669;
}
2.半圆
html :
<view class="user-divide">
<view class="user-divide-line"></view>
</view>
css:
/* 下面的圆角 */
.user-divide {
position: relative;
height: 40rpx;
width: 90%;
left: 5%;
background: #fff;
}
.user-divide:before {
left: -10rpx;
}
.user-divide:after {
right: -10rpx;
}
.user-divide:before, .user-divide:after {
position: absolute;
top:;
content: "";
width:36rpx;
height: 36rpx;
background-color: #5AA2E7;
border-radius: 50%;
}
.user-divide-line {
position: absolute;
top: 50%;
margin-top: -1px;
border-top: 1px dashed #E0E6ED;
width: 90%;
left: 5%;
right: 5%;
}
3.字体后面的箭头
/* 箭头 */ .m-list-item.has-arrow::after {
content: " ";
display: inline-block;
height: 18rpx;
width: 18rpx;
border-width: 2rpx 2rpx 0 0;
border-color: #8492A6;
border-style: solid;
position: absolute;
top: 50%;
right: 30rpx;
}
最新文章
- BPM业务流程管理与SAP如何更好集成整合?
- [moka同学笔记]Yii2.0给一张表中增加一个属性
- WebLogic部署
- ubuntu 12.04 安装wireshark
- Linux下Redis安装及配置
- 【测试】使用hr用户下的employees表写一条SQL语句,执行计划走索引全扫描
- malloc、free的使用
- bzoj 4300: 绝世好题 dp
- idea使用笔记
- php学习笔记——文件(1)
- Base:一种 Acid 的替代方案
- 苹果新的编程语言 Swift 语言进阶(三)--基本运算和扩展运算
- 详细分析Java中断机制-转载
- 日志收集-Elk6
- H - Gold Coins(2.4.1)
- day0321正则表达式
- 转载:理解RESTful架构
- java-多线程future等待返回
- 在ns2.35下完成柯老师lab18实验
- WordCount_命令行运行时指定参数