Home > Article > Web Front-end > How to use css to realize that a div is missing a corner
How to use css to realize that a div is missing a corner
- 藏色散人Original
- 2023-01-30 09:23:392566browse
Css method to realize that a div is missing a corner: 1. Create an HTML sample file and define a div; 2. Set the width and height background color for the div; 3. Add a pseudo class to the div that needs to delete a corner , set the pseudo-class to the same color as the background color, then rotate it 45 degrees, and then locate the corner that needs to be removed.
The operating environment of this tutorial: Windows 10 system, HTML5&&CSS3 version, DELL G3 computer
How to realize that a div is missing a corner in css?
css implementation of a div missing a corner
First create a div, set the width and height background color, add a pseudo class to the div that needs to delete a corner, and add Set the pseudo class to the same color as the background color, then rotate it 45 degrees, turn on positioning, and locate the corner that needs to be removed (in fact, it is just covering that corner)
<body>
<div class="box"></div>
</body>.box {
position: relative;
width: 200px;
height: 200px;
background-image: linear-gradient(90deg, #333333, #666666, #999999);
overflow: hidden;
&::before {
position: absolute;
content: "";
width: 100px;
height: 100px;
right: -50px;
top: -50px;
z-index: 100;
background-color: #ffffff;
transform: rotateZ(45deg);
}
}Rendering:
Recommended study: "css video tutorial"
The above is the detailed content of How to use css to realize that a div is missing a corner. For more information, please follow other related articles on the PHP Chinese website!