<!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> * { padding: 0; margin: 0; } .box { width: 0; height: 0; /* 上边框宽度调大 */ border-top: 100px solid transparent; border-right: 50px solid skyblue; /* 下和左边的边框宽度设置为0 */ border-bottom: 0; border-left: 0; } /* 简写：三角形 */ .triangle { width: 0; height: 0; /* 只保留右边的边框有颜色 */ border-color: transparent red transparent transparent; border-style: solid; /* 上边框宽度变大，右边框小些，下和左为0 */ border-width: 100px 50px 0 0; } /* 价格 */ .price { width: 160px; height: 24px; border: 1px solid red; margin: 0 auto; line-height: 24px; } .miaosha { position: relative; float: left; width: 90px; height: 100%; background-color: red; text-align: center; color: white; font-weight: 700; margin-right: 8px; } .miaosha i { position: absolute; right: 0; top: 0; width: 0; height: 0; border-color: transparent white transparent transparent; border-style: solid; /* 上边框宽度变大，右边框小些，下和左为0 */ border-width: 24px 10px 0 0; } /* 删除效果 */ .origin { color: gray; text-decoration: line-through; } </style> </head> <body> <div class="box"> </div> <div class="triangle"> </div> <div class="price"> <span class="miaosha"> ¥1650 <i></i> </span> <span class="origin">¥2650</span> </div> </body> </html>
