如何用css画出一个圆圈,里面有个对号?

width: 150px;height: 150px;margin: 100px auto;border-radius : 5e%;border: 5px solid #o0000e;display: flex;justify-content: center;align-items : center;} .box: : before { content: "";display: block;width: 88px;height: 5epx;border: 20px solid #ee000e;border-right: no...
如何用css画出一个圆圈,里面有个对号?
.box {
width: 150px;
height: 150px;
margin: 100px auto;
border-radius : 5e%;
border: 5px solid #o0000e;
display: flex;
justify-content: center;
align-items : center;
}

.box: : before {
content: "";
display: block;
width: 88px;
height: 5epx;
border: 20px solid #ee000e;
border-right: none;
border-top: none;
transform: rotate(-45deg) translate(7px,-10px);
}2021-01-16
<style>
.box{
width: 25px;
height: 25px;
border: 1px black solid;
border-radius: 50%;
transform: rotate(-45deg);

}
.outer{
width: 20px;
height: 10px;
border-bottom: 1px solid black;
border-left: 1px solid black;
position: relative;
top: 5px;
left:5px;
}
</style>
</head>
<body>
<div class="box">
<div class="outer">

</div>
</div>
</body>2021-01-16
mengvlog 阅读 11 次 更新于 2025-06-20 01:05:44 我来答关注问题0
  • width: 150px;height: 150px;margin: 100px auto;border-radius : 5e%;border: 5px solid #o0000e;display: flex;justify-content: center;align-items : center;} .box: : before { content: "";display: block;width: 88px;height: 5epx;border: 20px solid #ee000e;border-right: no...

  • 绝对定位到需要的位置,然后将右下角的数字使用css3的旋转函数180度旋转,就可以制造出倒过来的数字了 中间的白色椭圆要怎么画呢,我们知道border-radius的值与宽高相等可以画出圆形,那么当它的值为宽的一半比高的一半时,则可以画出椭圆形,这时我们再将它旋转到合适的角度,就可以得到想要的椭圆 最后...

  •  瑞物评测室 css制作放大缩小图标;css制作放大镜

    设置放大小图标,放大小图标 = 缩小小图标上的小圆圈里面多加一个竖线。在这里还是使用到了css伪类after设置一条竖线。如图: css样式代码: .magnifier i::after{ content: ""; width: 10px;height: 2px; display: inline-block; background-color: currentcolor; position: absolute; t...

  •  遥望沵所谓life css中,如何改变一个标签的样式得到一个1/4圆!

    .yuan{ width:200px;height:200px;border-radius:100% 0 0 0;background:#F00;} 是这样的效果吧!

  •  湖北倍领科技 怎么把视频放到一个圆圈里播放呢

    1 可以通过CSS来实现将视频放在圆形容器中,同时控制视频的大小和位置。2 原因在于CSS提供了border-radius属性,可以将元素的边角设置为圆角,从而实现将视频嵌入到圆形容器中,同时通过设置overflow属性来控制视频在容器内的显示。此外,还可以通过设置transform属性来调整视频的位置和大小。3 在实现视频圆形...

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部