Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use css to achieve braille shape, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

The code is here:

Body {

Display:flex

Justify-content:center

Align-items:center

.box {

Position:relative

Width:400px

Height:400px

Top:200px

Color:lightblue

.big {

Position:absolute

Width:400px

Height:200px

Border-radius:20px

Background-color:currentColor

Bottom:0

}

.top {

Position:absolute

Width:100px

Left:calc ((400px-100px) / 2)

Height:150px

Border-radius:20px20px00

Background-color:currentColor

Top:50px

}

.top:: before {

Content: ""

Position:absolute

Background-color:lightblue

Height:48px

Width:100px

Left:-100px

Top:102px

}

.top:: before {

Content: ""

Position:absolute

Background-color:lightblue

Height:48px

Width:100px

Left:-100px

Top:102px

}

.top:: after {

Content: ""

Position:absolute

Background-color:#fff

Border-radius:0020px0

Height:48px

Width:100px

Left:-100px

Top:102px

}

.topR {

Position:absolute

Background-color:lightblue

Height:48px

Width:100px

Right:50px

Top:152px

}

.topR:: after {

Content: ""

Position:absolute

Background-color:#fff

Border-radius:00020px

Height:48px

Width:100px

Left:0

Top:0

}

}

}

At first I thought that as long as the upper and lower rounded rectangles were spliced together, NONONO, in fact, there are rounded corners at the intersection of the two rounded corners. You can see at a glance that the rounded corners can be covered with white rounded rectangles, so here comes the problem:

After the white rounded rectangle is covered, a gap will be formed in the middle, which needs to be filled in blue. So the idea goes like this:

First, create two rounded rectangles:

HTML:

Thank you for reading this article carefully. I hope the article "how to use css to achieve braille shape" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.