css 写个半圈加圆描边

最新推荐文章于 2023-07-06 22:33:26 发布

红孩儿2011

最新推荐文章于 2023-07-06 22:33:26 发布

阅读量714

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/qq_26642611/article/details/103769597

版权

在这里插入图片描述

.coupon-time {
  color: #999;
  font-size: 24rpx;
  padding: 20rpx 0 28rpx;
  margin-top: 30rpx;
  border-top: #ddd dotted 1px;
  position: relative;
  &:before { //左边的半圈
    content: '';
    width: 15rpx;
    height: 20rpx;
    border: 1px solid #E7E7E7;
    border-radius: 0 50% 50% 0;
    border-left: none;
    position: absolute;
    background-color: #fff;
    left: -2rpx;
    top: -12rpx;
    z-index: 20;
  }
  &:after { //右边的半圈
    content: '';
    width: 15rpx;
    height: 20rpx;
    border: 1px solid #E7E7E7;
    border-radius: 50% 0 0 50%;
    border-right: none;
    position: absolute;
    background-color: #fff;
    right: -2rpx;
    top: -12rpx;
    z-index: 20;
  }
}