前言
CSS這東西，讓AI寫的確有點(diǎn)難度，畢竟它寫出來(lái)的東西，沒辦法直接預(yù)覽，這是其次。重要的是CSS這東西怎么描述，不好描述啊，比如我讓他給我制作一個(gè)這樣的效果出來(lái)，沒辦法描述，所以最終失敗了！
需求
想要一個(gè)像上圖一樣的紅色標(biāo)簽
第一次操作
提問(wèn)
回答
以下是使用 CSS 畫一個(gè)正方形，并在其右上角添加一個(gè)紅色標(biāo)簽的示例代碼：
HTML 代碼：
<div class="square">
<div class="tag">特價(jià)</div>
</div>
CSS 代碼：
.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);
}
效果
第二次操作
提問(wèn)
回答
html代碼
<div class="square">
<div class="tag">特價(jià)</div>
</div>
CSS 代碼：
.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);
}
效果
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-434985.html
第三次，我放棄了
由于無(wú)法直接預(yù)覽它的代碼，還要復(fù)制它的代碼手動(dòng)預(yù)覽，所以我放棄了。（內(nèi)心OS：看見它的代碼，我找到思路了）我盡力的將它的代碼組裝，然后再簡(jiǎn)單優(yōu)化，最終形成的效果（第一個(gè)圖片），還是很棒的，也不用我去百度一點(diǎn)點(diǎn)找了。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-434985.html
最終代碼
<!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>
到了這里，關(guān)于讓chatGPT給我寫一個(gè)CSS，我太蠢了的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
