央企做的好的网站,专业建站网站,网站每个月8g流量,百度竞价最低点击一次多少钱前言
CSS这东西#xff0c;让AI写的确有点难度#xff0c;毕竟它写出来的东西#xff0c;没办法直接预览#xff0c;这是其次。重要的是CSS这东西怎么描述#xff0c;不好描述啊#xff0c;比如我让他给我制作一个这样的效果出来#xff0c;没办法描述#xff0c;所以…前言
CSS这东西让AI写的确有点难度毕竟它写出来的东西没办法直接预览这是其次。重要的是CSS这东西怎么描述不好描述啊比如我让他给我制作一个这样的效果出来没办法描述所以最终失败了 需求
想要一个像上图一样的红色标签
第一次操作
提问 回答
以下是使用 CSS 画一个正方形并在其右上角添加一个红色标签的示例代码
HTML 代码
div classsquarediv classtag特价/div
/divCSS 代码
.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);
}效果 第二次操作
提问 回答
html代码
div classsquarediv classtag特价/div
/divCSS 代码
.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);
}效果 第三次我放弃了
由于无法直接预览它的代码还要复制它的代码手动预览所以我放弃了。内心OS看见它的代码我找到思路了我尽力的将它的代码组装然后再简单优化最终形成的效果第一个图片还是很棒的也不用我去百度一点点找了。
最终代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.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
/headbodydivdiv classspecial背景图/divdiv classtrapezoid打骨折/div/div
/body/html
