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
Common interview questions and answers for web designer positions
1. What are the templates for ASP.NET Web applicat...
MySQL 8.0.23 free installation version configuration detailed tutorial
The first step is to download the free installati...
Drop-down menu implemented by HTML+CSS3+JS
Achieve results html <div class="containe...
In-depth understanding of MySQL long transactions
Preface: This article mainly introduces the conte...
MySql batch insert optimization Sql execution efficiency example detailed explanation
MySql batch insert optimization Sql execution eff...
Teach you to connect to MySQL database using eclipse
Preface Since errors always occur, record the pro...
A brief talk about the diff algorithm in Vue
Table of contents Overview Virtual Dom principle ...
CSS tips for controlling animation playback and pause (very practical)
Today I will introduce a very simple trick to con...
Implementing the preview function of multiple image uploads based on HTML
I recently wrote a script for uploading multiple ...
Vue realizes the sliding cross effect of the ball
This article example shares the specific code of ...
Vue implements two-way data binding
This article example shares the specific code of ...
Detailed explanation of common for loop in JavaScript statements
There are many loop statements in JavaScript, inc...
Vue implements image drag and drop function
This article example shares the specific code of ...
Detailed installation and use of SSH in Ubuntu environment
SSH stands for Secure Shell, which is a secure tr...
CSS3 realizes the animation effect of lotus blooming
Let’s look at the effect first: This effect looks...