CSS实现矩形两边挖半圆

效果如图：

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

<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>

 

posted @ 2020-11-27 10:25  neverthelessing  阅读(465)  评论(0)    收藏  举报