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
MySQL scheduled full database backup
Table of contents 1. MySQL data backup 1.1, mysql...
SQL implementation LeetCode (176. Second highest salary)
[LeetCode] 176. Second Highest Salary Write a SQL...
A brief analysis of whether using iframe to call a page will cache the page
Recently, I have a project that requires using ifr...
Why Seconds_Behind_Master is still 0 when MySQL synchronization delay occurs
Table of contents Problem Description Principle A...
Detailed tutorial on installing Python 3.6.6 from scratch on CentOS 7.5
ps: The environment is as the title Install possi...
MySQL date processing function example analysis
This article mainly introduces the example analys...
Detailed explanation of the solution for HTML layout with fixed left and right widths and adaptive middle
This article introduces a detailed explanation of...
Implementation of Docker deployment of SQL Server 2019 Always On cluster
Table of contents Docker deployment Always on clu...
Complete guide to using iframe without borders or borders (practical experience summary)
<iframe src=”you page's url” width=”100″ he...
A brief analysis of the matching priority of Nginx configuration location
Preface The location in the server block in the N...
Example verification MySQL | update field with the same value will record binlog
1. Introduction A few days ago, a development col...
VPS builds offline download server (post-network disk era)
motivation Due to learning needs, I purchased a v...
XHTML tags that are easily confused by the location of the use
<br />We have always emphasized semantics in...
MySQL series 6 users and authorization
Table of contents Tutorial Series 1. User Managem...
Centos7.3 How to install and deploy Nginx and configure https
Installation Environment 1. gcc installation To i...