想要使用CSS制作自定义形状

Question

我想创建一个这样的形状，每个块应该是一个div，以便我可以显示信息。我尝试了但是我只使用下面的代码来制作下锥体：

#cone {
  width: 0;
  height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-top: 100px solid red;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

如何获得上弯曲框，任何导演或教程都会有很大的帮助。

Answer 1

您可以使用提供的图像作为背景图像，然后将div放在每个方块上。像这样：

<div id="wrapper">
    <div id="row1el1" class="row1">This is some text</div>
    <div id="row2el1" class="row2">This is some text</div>
    <div id="row2el2" class="row2">This is some text</div>
    <div id="row3el1" class="row3">This is some text</div>
    <div id="row3el2" class="row3">This is some text</div>
    <div id="row3el3" class="row3">This is some text</div>
    <div id="row3el4" class="row3">This is some text</div>
    <div id="row4el1" class="row4">This is some text</div>
    <div id="row4el2" class="row4">This is some text</div>
    <div id="row4el3" class="row4">This is some text</div>
    <div id="row4el4" class="row4">This is some text</div>
    <div id="row4el5" class="row4">This is some text</div>
    <div id="row4el6" class="row4">This is some text</div>
    <div id="row4el7" class="row4">This is some text</div>
    <div id="row4el8" class="row4">This is some text</div>
</div>

<style>
    #wrapper {
        position: relative;
        height: 500px;
        width: 500px;
        background-image: url(shapes.png);
        background-size: 100% 100%;
    }
    #wrapper div {
        height: 15%;
        position: absolute;
        text-align: center;
    }
    .row1 {
        width: 20%;
    }
    .row2 {
        width: 20%;
    }
    .row3 {
        width: 15%;
    }
    .row4 {
        width: 12%;
    }
    #row1el1 {
        left: 40%;
        top: 75%;
    }
    #row2el1 {
        transform: rotate(-20deg);
        left: 30%;
        top: 53%;
    }
    #row2el2 {
        transform: rotate(20deg);
        left: 50%;
        top: 53%;
    }
    #row3el1 {
        transform: rotate(-30deg);
        left: 18%;
        top: 37%;
    }
    #row3el2 {
        transform: rotate(-15deg);
        left: 34%;
        top: 30%;
    }
    #row3el3 {
        transform: rotate(15deg);
        left: 51%;
        top: 30%;
    }
    #row3el4 {
        transform: rotate(30deg);
        left: 67%;
        top: 37%;
    }
    #row4el1 {
        transform: rotate(-35deg);
        left: 3%;
        top: 20%;
    }
    #row4el2 {
        transform: rotate(-27deg);
        left: 14%;
        top: 12%;
    }
    #row4el3 {
        transform: rotate(-18deg);
        left: 25%;
        top: 7%;
    }
    #row4el4 {
        transform: rotate(-7deg);
        left: 38%;
        top: 3%;
    }
    #row4el5 {
        transform: rotate(7deg);
        left: 50%;
        top: 3%;
    }
    #row4el6 {
        transform: rotate(18deg);
        left: 62%;
        top: 7%;
    }
    #row4el7 {
        transform: rotate(27deg);
        left: 73%;
        top: 12%;
    }
    #row4el8 {
        transform: rotate(35deg);
        left: 83%;
        top: 20%;
    }
</style>

Answer 2

您可以在CSS3中轻松制作

＆＃13;

＆＃13;

ARRAYFORMULA

＆＃13;

.wifi {
  padding: 20px;
}

.wifi,
.wifi:before {
  display: inline-block;
  border: 60px double transparent;
  border-top-color: currentColor;
  border-radius: 50%;
}

.wifi:before {
  content: '';
  width: 0;
  height: 0;
}

＆＃13;

＆＃13;

＆＃13;