<!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>Document</title> <style> .price { width: 180px; height: 30px; border: 1px solid pink; border-radius: 5px; line-height: 30px; text-align: center; font-size: 14px; } .discount { position: relative; float: left; width: 100px; height: 100%; background: pink; } em { position: absolute; top: 0; right: 0; border-color: transparent white transparent transparent; border-style: solid; border-width: 30px 15px 0 0; } del { font-size: 12px; color: gray; } </style> </head> <body> <div class="price"> <span class="discount"> ￥1499 <em></em> </span> <del>￥2532</del> </div> </body> </html>
案例- CSS 三角加强
猜你喜欢
转载自www.cnblogs.com/qtbb/p/11737191.html
今日推荐
周排行