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
Nginx implements dynamic and static separation example explanation
In order to speed up the parsing of the website, ...
HTML tutorial, easy to learn HTML language
1. <body background=image file name bgcolor=co...
How to find websites with SQL injection (must read)
Method 1: Use Google advanced search, for example...
Several methods of implementing two fixed columns and one adaptive column in CSS
This article introduces several methods of implem...
Solution to the blank page after vue.js packaged project
I believe that many partners who have just come i...
Summary of standard usage of html, css and js comments
Adding necessary comments is a good habit that a ...
Introduction to the usage of props in Vue
Preface: In Vue, props can be used to connect ori...
Beginners learn some HTML tags (1)
Beginners can learn HTML by understanding some HT...
Example of how to implement value transfer between WeChat mini program pages
Passing values between mini program pages Good ...
Javascript to achieve drumming effect
This article shares the specific code of Javascri...
Detailed explanation of the implementation of shared modules in Angular projects
Table of contents 1. Shared CommonModule 2. Share...
Detailed explanation of several commands in Linux to obtain detailed hardware information
In Linux systems, especially server systems, it i...
MySQL 5.6.37 (zip) download installation configuration graphic tutorial
This article shares the download, installation an...
Detailed steps for installing rockerChat in docker and setting up a chat room
Comprehensive Documentation github address https:...
Detailed explanation of views in MySQL
view: Views in MySQL have many similarities with ...