CSS实现矩形两边挖半圆

北岭有燕

于 2020-11-27 10:25:10 发布

阅读量2.5k

点赞数 5

分类专栏： HTML+CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_41160739/article/details/110222838

版权

HTML+CSS 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

效果如图：

思路：通过伪元素把一个白色的圆（和背景色相同）放在矩形中心两边。

<html>
  <head>
    <style>
      /* top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置 */
      /* transform:translate(-50%,-50%); 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。 */
      .semi-circle {
        width: 200px;
        height: 400px;
        margin: 200px auto;
        position: relative;
        background: #000000;
        border-radius: 8px;
      }

      .semi-circle:after {
        position: absolute;
        content: "";
        width: 20px;
        height: 20px;
        background: #fff;
        border-radius: 100%;
        right: 0;
        top: 50%;
        transform: translate(50%, -50%);
      }

      .semi-circle:before {
        position: absolute;
        content: "";
        width: 20px;
        height: 20px;
        background: #fff;
        border-radius: 100%;
        left: 0;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <!-- css 矩形两边挖半圆 -->
    <div class="semi-circle"></div>

  </body>
</html>

北岭有燕

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
CSS实现矩形两边挖半圆

效果如图：思路：子绝父相，通过伪元素把一个白色的圆（和背景色相同）放在矩形中心两边。<html> <head> <style> /* top: 50%;left: 50%;，是以左上角为原点，故不处于中心位置 */ /* transform:translate(-50%,-50%); 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。 */ .semi-circle {
复制链接

扫一扫

专栏目录