html+css实现三角形的三种方法

来源：互联网发布：速拓软件手机编辑：程序博客网时间：2024/06/16 17:13

一、淘宝网的三角形实现

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">*{padding:0;margin:0;}div{width:0;/*宽度可以继承*/height:0;/*高度不能继承*/border:50px solid red;/*border-width:50px;border-style:solid;border-color:red;*/border-color:yellow  transparent transparent transparent;}div:hover{border-color:transparent transparent yellow transparent;position:absolute;top:-50px;}</style></head><body><div></div></body></html>

二、京东网站三角形的实现方法

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{padding:0;margin:0;}div{width:0;height:0;border:50px solid red;border-color:transparent transparent red transparent;position:relative;}div::after{content:"";display:block;width:0;height:0;border:50px solid #000;border-color:transparent transparent #fff transparent;position:absolute;top:-43px;left:-50px;}</style></head><body><div></div></body></html>

三、易迅网三种形的实现

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{padding:0;margin:0;}div{width:50px;height:50px;border:1px solid transparent;position:relative;overflow:hidden;box-sizing: border-box;}p{font-size:30px;position:absolute;top:0;left:41px;}</style></head><body><div><p>◇</p></div></body></html>

阅读全文

1 0