生活随笔
收集整理的這篇文章主要介紹了
css制作三角形、带三角文本框、价格三角框
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS 三角制作
</title><style>.box1 {width: 0;height: 0;border-top: 20px solid pink;border-right: 20px solid red;border-bottom: 20px solid blue;border-left: 20px solid green;}.box2 {width: 0;height: 0;border: 50px solid transparent;border-left-color: pink;margin: 20px;}.jd {position: relative;width: 120px;height: 249px;background-color: pink;}.jd span {position: absolute;right: -20px;top: 40px;width: 0;height: 0;line-height: 0;font-size: 0;border: 10px solid transparent;border-left-color: pink;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div><div class="jd"><span></span></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS三角強化的巧妙運用
</title><style>.box1 {width: 0;height: 0;border-color: transparent red transparent transparent;border-style: solid;border-width: 100px 50px 0 0;}.price {width: 160px;height: 24px;line-height: 24px;border: 1px solid red;margin: 25px;}.miaosha {position: relative;float: left;width: 90px;height: 100%;background-color: red;text-align: center;color: #fff;font-weight: 700;margin-right: 8px;}.miaosha i {position: absolute;right: 0;top: 0;width: 0;height: 0;border-color: transparent #fff transparent transparent;border-style: solid;border-width: 24px 10px 0 0;}.origin {font-size: 12px;color: gray;text-decoration: line-through;}</style>
</head>
<body><div class="box1"></div><div class="price"><span class="miaosha">￥1650
<i></i></span><span class="origin">￥5650
</span></div>
</body>
</html>
總結
以上是生活随笔為你收集整理的css制作三角形、带三角文本框、价格三角框的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
