How to use css to realize Braille shape
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!
