css 小Demo

SeriousLose

已于 2022-07-20 21:19:47 修改

阅读量134

点赞数 1

分类专栏： CSS 文章标签：前端 servlet html css css3

于 2022-07-20 21:19:23 首次发布

本文链接：https://blog.csdn.net/SeriousLose/article/details/125900923

版权

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

这篇博客展示了如何使用CSS来创建一个由方形、半圆形和圆形组合成的独特图形。通过固定定位、边框、内边距和背景颜色，作者详细解释了每个元素的样式属性，最终形成一个带有背景渐变和半圆装饰的复杂布局。这个实例对于前端开发者来说，是一个关于CSS创新和布局技巧的实用教程。

摘要由CSDN通过智能技术生成

    body {
      background: pink;
    }

    .square,
    .square>div {
      box-sizing: border-box;
    }

    .square {
      width: 300px;
      position: fixed;
      top: calc(50vh - 200px);
      left: calc(50vw - 150px);
      overflow: hidden;
    }

    .square>.s-top {
      border: 1px solid #fff;
      height: 170px;
      border-radius: 5px 5px 0 0;
      border-width: 1px 1px 0 1px;
    }

    .square>.s-middle {
      border-left: 1px solid #fff;
      height: 60px;
    }

    .square>.s-bottom {
      border: 1px solid #fff;
      height: 170px;
      border-radius: 0 0 5px 5px;
      border-width: 0px 1px 1px 1px;
    }

    .square>.s-half-circle {
      border: 1px solid #fff;
      position: absolute;
      width: 30px;
      height: 60px;
      border-width: 1px 0px 1px 1px;
      border-radius: 30px 0 0 30px;
      top: calc(50% - 30px);
      right: 0;
    }

    .square>.s-background {
      border: 360px solid rgba(255, 255, 255, 0.3);
      position: absolute;
      width: 780px;
      height: 780px;
      border-radius: 50%;
      top: calc(50% - 390px);
      right: -390px;
    }

    .circle {
      width: 50px;
      height: 50px;
      border: 1px solid #fff;
      border-radius: 50%;
      position: absolute;
      top: calc(50% - 25px);
      left: calc(50% + 125px);
      background-color: rgba(255, 255, 255, .3);
      box-sizing: border-box;
    }

<div class="square">
    <div class="s-top"></div>
    <div class="s-middle"></div>
    <div class="s-bottom"></div>
    <div class="s-half-circle"></div>
    <div class="s-background"></div>
  </div>
 <div class="circle"></div>

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.