通过边框阴圆角绘制简单的图形

棒5

已于 2022-07-05 13:56:17 修改

阅读量98

点赞数 1

文章标签： css 前端

于 2022-07-05 13:41:21 首次发布

本文链接：https://blog.csdn.net/weixin_55896343/article/details/125617907

版权

（border-radius）通过边框圆角来绘制简单的图形

CSS代码

.box {
        width: 800px;
        height: 900px;
        margin: 0 auto;
        border: 1px gray solid;
      }
      .box > div {
        width: 700px;
        height: 200px;
        margin: 10px 25px;
      }
      .box h4 {
        width: 700px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        background-color: #afc3dc;
        margin: 10px 25px;
      }
      .sector,
      .blade,
      .leaf,
      .chat {
        width: 100px;

        margin: 30px auto;
      }
      .sector {
        width: 100px;
        height: 100px;
        border: 1px solid #bc8d8d;
        background-color: #bc8d8d;
        border-top-left-radius: 100%;
      }
      .blade {
        width: 600px;
        height: 100px;
        border: 1px solid #bab4fc;
        background-color: #bab4fc;
        border-radius: 101px 0;
      }
      .leaf {
        width: 150px;
        height: 150px;
        border: 1px solid #dbfcb5;
        background-color: #dbfcb5;
        border-radius: 100% 0;
      }
      .chat {
        width: 400px;
        height: 100px;
        border: 1px solid #fdddb4;
        background-color: #fdddb4;
        border-radius: 20px 10px 30px 0px;
      }

HTML代码

 <div class="box">
      <div>
        <h4>扇形</h4>
        <div class="sector"></div>
      </div>
      <div>
        <h4>刀片</h4>
        <div class="blade"></div>
      </div>
      <div>
        <h4>叶子</h4>
        <div class="leaf"></div>
      </div>
      <div>
        <h4>聊天框</h4>
        <div class="chat"></div>
      </div>

 .box {
        width: 800px;
        height: 900px;
        margin: auto;
        border: 1px solid gray;
      }
      .box > div {
        margin: 5px 35px;
      }
      h3 {
        width: 700px;
        height: 40px;
        background-color: #afc3dc;
        margin-bottom: 40px;
        text-align: center;
        line-height: 40px;
      }
      .sanjiaoxing,
      .tixing,
      .six,
      .tixing1 {
        height: 200px;
        margin: 0 auto;
      }
      .sanjiaoxing {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 100px 100px;
        border-color: transparent transparent #f97f70;
      }
      .tixing {
        width: 100px;
        height: 0;
        border-style: solid;
        border-width: 0 100px 100px;
        border-color: transparent transparent #f97f70;
      }
      .tixing1 {
        width: 100px;
        height: 0px;
        border-style: solid;
        border-width: 100px 100px 0px;
        border-color: #f97f70 transparent#f97f70;
      }

HTML代码

<div class="box">
      <div>
        <h3>三角形</h3>
        <div class="sanjiaoxing"></div>
      </div>
      <div>
        <h3>梯形</h3>
        <div class="tixing"></div>
      </div>
      <div>
        <h3>六边形</h3>
        <div class="six">
          <div class="tixing"></div>
          <div class="tixing1"></div>
        </div>
      </div>
    </div>