问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css实现特殊形状div？

头像
张一一
    491334

    image.png
    这种效果可以通过纯CSS实现吗？

    css3html5
    阅读 1.8k
    3 个回答
    得票最新
    头像头饰
    Meathill
      22.2k123642

      看起来就是几个圆角矩形，旋转拼接而成，那么很容易实现，自己多试试就行了。

      可能用到的 css 属性：

      • border-radius
      • width
      • height
      • transform: rotate()
      • transform-origin
      • position: absolute
      头像
      玛拉_以琳
        8.7k41541
        <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      margin-top: 200px;
      margin-left: 300px;
      position: relative;
    }

    .long {
      height: 10px;
      width: 200px;
      border-radius: 5px;
      background-color: rgba(0, 255, 255, 0.5);
    }

    .short {
      height: 10px;
      border-radius: 5px;
      background-color: rgba(0, 255, 255, 0.5);
      width: 50px;
      position: absolute;
    }

    .short1,
    .short4 {
      width: 10px;
      height: 50px;
    }

    .short1 {
      top: 1px;
      left: -4px;
      transform: rotate(10deg);
    }

    .short4 {
      left: 193px;
      top: 1px;
      transform: rotate(-10deg);
    }

    .short2 {
      transform: rotate(-54deg);
      top: 24px;
      left: -17px;
      width: 52px;
    }

    .short3 {
      transform: rotate(54deg);
      top: 24px;
      left: 163px;
      width: 52px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="long"></div>
    <div class="short1 short"></div>
    <div class="short2 short"></div>
    <div class="short3 short"></div>
    <div class="short4 short"></div>
  </div>
</body>

</html>

        具体细节可以具体修改修改

        头像
        Mr_yam
          122
          <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      .container {
        margin: 0 auto;
        width: 300px;
        height: 50px;
        background-color: aqua;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 95% 30%, 5% 30%, 0 100%);
      }
    </style>
  </head>
  <body>
    <div class="container"></div>
  </body>
</html>

          效果：

          查看全部 3 个回答
          推荐问题
          宣传栏