仅使用CSS创建形状

问题描述 投票：0回答：1

我需要使用only CSS3创建此自定义形状。

divider of sections

需要使用CSS，而不是svg。我试图使用此链接的摘录：Wave (or shape?) with border on CSS3，但我不知道如何正确处理形状。

也只能是中心形状！我正在用这支笔进行测试：https://codepen.io/Blumenkranz/pen/vYEeLjr

@mixin push--auto {
    margin: { 
        left: auto;
        right: auto;
    }
}
@mixin pseudo($display: block, $pos: absolute, $content: "") {
  content: $content;
  display: $display;
  position: $pos;
}

.section {
  width: 100%;
  height: 50vh;
  background: $blue-dark;
  position:relative;
   &::after, &::before {
    @include pseudo;
    @include  push--auto;
    bottom: -46px; 
    left: 35%;
    width: 250px; 
    height: 150px;
    background: $blue-dark;
   border-radius: 100%;

}
}
css sass css-selectors css-shapes
1个回答
0
投票

我不知道您为什么只想使用CSS来实现这一点，但是您就可以了。我对您的形状进行了近似处理，可以使用与链接的方法类似的技术轻松进行调整。

enter image description here这是代码，我将它们全部放入一个html文件中，因此很容易加载：

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            display: flex;
            height: 100vh;
        }
        .container {
            margin: auto;
            position: relative;
        }
        .shape {
            width: 200px;
            height: 200px;
            background-color: #157995;
            transform: rotate(45deg) skew(-10deg,-10deg);
            clip-path: polygon(68% 100%, 100% 68%, 100% 100%);
            border-radius: 15%;
        }
        .bar {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 12px;
            background-color: #157995;
        }
        .container::before, .container::after {
            content: "";
            position: absolute;
            width: 50px;
            height: 20px;
            background-color: white;
            z-index: 1;
            bottom: 0px;
        }
        .container::before {
            left: 12.4px;
            border-top-right-radius: 50%;
            transform: skew(55deg);
        }
        .container::after {
            right: 12.4px;
            border-top-left-radius: 50%;
            transform: skew(-55deg);
        }
    </style>
</head>
    <body>
        <div class="container">
            <div class="bar"></div>
            <div class="shape"></div>
        </divclass>
    </body>
</html>

我在主体上使用display flex，在容器上使用margin自动将其放置在页面的中央。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.