<!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> /* 价格 */ .price { width: 160px; height: 24px; margin: 0 auto; line-height: 24px; background-color: gray; border-radius: 5px; } .miaosha { position: relative; float: left; width: 90px; height: 100%; background-color: red; text-align: center; color: white; font-weight: 700; margin-right: 8px; /* 左上、右上、右下、左下 */ border-radius: 5px 0 0 5px; } .miaosha i { position: absolute; right: 0; top: 0; width: 0; height: 0; border-color: transparent gray transparent transparent; border-style: solid; /* 上边框宽度变大，右边框小些，下和左为0 */ border-width: 24px 10px 0 0; } /* 删除效果 */ .origin { color: white; 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>
