CSS实现矩形两边挖半圆

转：https://blog.51cto.com/u_15351691/3732659

效果图：

 

 

<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>
-----------------------------------
©著作权归作者所有：来自51CTO博客作者wx612f45b709d99的原创作品，请联系作者获取转载授权，否则将追究法律责任
CSS实现矩形两边挖半圆
https://blog.51cto.com/u_15351691/3732659

 

posted @ 2022-04-30 15:14  漫漫长路</>  阅读(425)  评论(0)    收藏  举报