foreword
CSS is a bit difficult for AI to write. After all, there is no way to directly preview the things it writes. This is the second. The important thing is how to describe CSS, which is difficult to describe. For example, I asked him to make such an effect for me, but there was no way to describe it, so it failed in the end!
need
Want a red label like the one pictured above
first time operation
ask questions
answer
The following is a sample code to draw a square with CSS and add a red label to its upper right corner:
HTML code:
<div class="square">
<div class="tag">特价</div>
</div>
CSS code:
.square {
position: relative;
width: 200px;
height: 200px;
background-color: #ccc;
}
.tag {
position: absolute;
top: -20px;
right: -20px;
width: 80px;
height: 80px;
background-color: red;
color: white;
text-align: center;
line-height: 80px;
font-size: 24px;
transform: rotate(-45deg);
}
Effect
second operation
ask questions
answer
html code
<div class="square">
<div class="tag">特价</div>
</div>
CSS code:
.square {
position: relative;
width: 200px;
height: 200px;
background-color: #ccc;
}
.tag {
position: absolute;
top: -20px;
right: -20px;
width: 0;
height: 0;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid red;
transform: rotate(45deg);
}
Effect
The third time, I gave up
Since I can't directly preview its code, I have to copy its code to preview manually, so I gave up. ( 内心OS：看见它的代码，我找到思路了) I tried my best to assemble its code, and then simply optimized it. The final effect (the first picture) is still very good, and I don’t need to go to Baidu to search for it.
final code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.special {
position: relative;
width: 100px;
height: 100px;
background-color: rgb(49, 182, 37);
color: white;
text-align: center;
line-height: 100px;
}
.trapezoid {
position:absolute;
top: 1px;
left: 40px;
width: 50px;
height: 0;
border-style: solid;
border-width: 25px 25px 25px 25px;
border-color: transparent transparent red transparent;
transform: rotate(45deg);
font-size: 14px;
color: azure;
text-align: center;
line-height: 25px;
}
</style>
</head>
<body>
<div>
<div class="special">背景图</div>
<div class="trapezoid">打骨折</div>
</div>
</body>
</html>