Example code for implementing div concave corner style with css
|
In normal development, we usually use convex rounded corners, that is, the border-radius attribute. If there is a concave corner, we generally consider two implementation methods. One is to use the background image directly, and the other is to use CSS. The properties used are background or background-image combined with radial-gradient. Example: background-image: radial-gradient(200px at 50px 0px, #fff 50px, #4169E1 50px); For radial gradient, there are mainly 3 parameters to control. One is the origin and size. The size is similar to border-radius. The origin is represented by at, which can specify the coordinates of the point, or by left, right, top, and bottom. Next are two colors and transparency, size, etc. Here 50px or percentage, I have tested the first one, only 50 is semi-rounded, while the second 50px seems to have little effect. Example:
To achieve the light green concave corner style shown in the picture, there is no material picture. Start: First, set the width and height of this div and set relative positioning. Then put 4 absolutely positioned elements inside it, set their width and height equal to the size of the concave, and then absolutely position them to fix them to the 4 corners. Then use the concave style above. It should be noted that the top two are very easy to complete, but the bottom two corners, after only setting the position and the concave position, are like this:
This requires another rotation. The complete code is as follows: CSS:
.notice_box_cls #commonNotice {
background-color: #E8F7F2;
padding: 20px 10px;
}
.notice_box_cls .notice_body0 {
position: relative;
}
.notice_box_cls .notice_body {
background:radial-gradient(15px at left top,#fff 50px,#E8F7F2 50%);
position: absolute;
left: 0;
top: 0;
width: 15px;
height: 15px;
}
.notice_box_cls .notice_body1 {
background:radial-gradient(15px at right top,#fff 50px,#E8F7F2 50%);
position: absolute;
right: 0;
top: 0;
width: 15px;
height: 15px;
}
.notice_box_cls .notice_body2 {
background:radial-gradient(15px at right bottom,#fff 50px,#E8F7F2 50%);
position: absolute;
left: 0;
bottom: 0;
width: 15px;
height: 15px;
transform: rotate(90deg);
}
.notice_box_cls .notice_body3 {
background:radial-gradient(15px at left bottom,#fff 50px,#E8F7F2 50%);
position: absolute;
right: 0;
bottom: 0;
width: 15px;
height: 15px;
transform: rotate(270deg);
}html:
<div class="notice">
<div class="">
<div class="notice_title">
<span>Notices and Announcements</span>
</div>
<div class="notice_body0">
<ul id="commonNotice">
<!-- <li><a href="#" class="fl">Hubei Province Education Informatization S1</a><i class="fr">2017-5-13</i></li>
<li><a href="#" class="fl">Hubei Province Education Informatization S2</a><i class="fr">2017-5-13</i></li>
<li><a href="#" class="fl">Hubei Province Education Informatization S3</a><i class="fr">2017-5-13</i></li>
<li><a href="#" class="fl">Hubei Province Education Informatization S4</a><i class="fr">2017-5-13</i></li>
<li><a href="#" class="fl">Hubei Province Education Informatization S5</a><i class="fr">2017-5-13</i></li>
<li><a href="#" class="fl">Hubei Province Education Informatization S6</a><i class="fr">2017-5-13</i></li> -->
</ul>
<div class="notice_body">
</div>
<div class="notice_body1">
</div>
<div class="notice_body2">
</div>
<div class="notice_body3">
</div>
</div>
</div>
</div>The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: Several ways to improve the readability of web pages
>>: Detailed process of Vue front-end packaging
Recommend
Quick solution for forgetting MySQL8 password
Preface When we forget the MySQL database passwor...
Detailed explanation of bash command usage
On Linux, bash is adopted as the standard, which ...
Simple implementation of Mysql add, delete, modify and query statements
Simple implementation of Mysql add, delete, modif...
How to configure Linux to use LDAP user authentication
I am using LDAP user management implemented in Ce...
Solution to the problem of child element margin-top causing parent element to move
Problem Description Today, when I was modifying t...
Detailed explanation of HTML element height, offsetHeight, clientHeight, scrollTop, etc.
Some attributes about elements In the daily devel...
Manjaro installation CUDA implementation tutorial analysis
At the end of last year, I replaced the opensuse ...
Share some key interview questions about MySQL index
Preface An index is a data structure that sorts o...
Analysis of the difference between absolute path and relative path in HTML
As shown in the figure: There are many files conne...
Pitfall notes of vuex and pinia in vue3
Table of contents introduce Installation and Usag...
The simplest MySQL data backup and restore tutorial in history (Part 2) (Part 37)
Data backup and restore part 3, details are as fo...
MySQL infobright installation steps
Table of contents 1. Use the "rpm -ivh insta...
Detailed tutorial on minimizing the installation of CentOS 8.1 virtual machine in VirtualBox
1. Download related tools and images Download Lin...
The most comprehensive explanation of the locking mechanism in MySQL
Table of contents Preface Global Lock Full databa...
A brief introduction to the usage of decimal type in MySQL
The floating-point types supported in MySQL are F...