用css设计实现太极八卦图的效果

最新推荐文章于 2024-07-22 16:31:07 发布

原创最新推荐文章于 2024-07-22 16:31:07 发布 · 264 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用CSS实现特殊圆形边框效果的方法，通过div元素及其伪元素:before和:after，配合特定的宽度、高度及边框设置，实现了独特的视觉效果。

<div></div>
<style>
 div{
 position:relative;
 width:150px;
 height:300px;
 background-color:#fff;
 border-left:150px solid #000;
 border-radius:50%;
}
 div::before{
  content:'';
  position:absolute;
  top:0;
  left:-75px;
  width:30px;
  height:30px;
  background-color:#fff;
  border:60px solid #000;
  border-radius:50%;
}
div::after{
  content:'';
  position:absolute;
  bottom:0;
  left:-75px;
  width:30px;
  height:30px;
  background-color:#000;
  border:60px solid #fff;
  border-radius:50%;
}
</style>