只需要把上期这个盒子左边框和下边框宽度设为0,上边框加大宽度就行。
.demo1{ width:0; height: 0; line-height: 0; font-size: 0; border-top:20px solid red ; border-right:10px solid green ; border-bottom:0px solid blue ; border-left:0px solid purple ; }
<!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> .demo1{ width:0; height: 0; line-height: 0; font-size: 0; border-top:20px solid transparent ; border-right:10px solid green ; border-bottom:0px solid blue ; border-left:0px solid purple ; } </style> </head> <body> <div class="demo1"> </div> </body> </html>
<!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> .demo{ width: 160px; height: 24px; line-height: 24px; /* 让文本垂直居中 */ border: 1px solid red; margin: 50px auto; } .demo1{ position: relative; float: left; /* span是行内元素，浮动之后可设置宽高*/ width: 90px; height: 100%; background-color: red; text-align: center; color: #fff; font-weight: 700; margin-right: 8px; } .demo1 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; } .demo2{ font-size: 12px; color: gray; text-decoration: line-through; } </style> </head> <body> <div class="demo"> <span class="demo1"> ￥1500 <i></i> </span> <span class="demo2">￥1999</span> </div> </body> </html>
<!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> .demo{ width: 160px; height: 24px; line-height: 24px; /* 让文本垂直居中 */ border: 1px solid red; margin: 50px auto; } .demo1{ position: relative; float: left; /* span是行内元素，浮动之后可设置宽高*/ width: 90px; height: 100%; background-color: red; text-align: center; color: #fff; font-weight: 700; margin-right: 8px; } .demo1 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; } .demo2{ font-size: 12px; color: gray; text-decoration: line-through; } </style> </head> <body> <div class="demo"> <span class="demo1"> ￥1500 <i></i> </span> <span class="demo2">￥1999</span> </div> </body> </html>
