CSS中易迅网三角形的制作

购物网站上的三角形非常常见，那么我们该如何实现呢，比如我们要实现易迅网上那种倒三角，如下图

首先如果一个盒子我们把它的宽高都设置为0，边框分别设置10个像素不同的颜色，我们看看会出现什么情况？

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>div {width: 0;height: 0;border-top: 10px solid red;border-right: 10px solid yellow;border-bottom: 10px solid blue;border-left: 10px solid green;}</style>
</head>
<body>
<div></div>
</body>
</html>

奇迹出现了，上下左右全是三角形

通过上面的结果我们可以很快的实现易迅网上那种倒三角，只需要将其它的边框设置为透明这样就可以实现一个倒三角，最后使用子绝父相的方法让三角形位于合适的位置，这样我们就实现了易迅网中的那种三角形

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>div {position: relative; /*相对定位*/}span {width: 0;height: 0;display: inline-block;/*设置边框宽度为5px，上边框为红色，其它为透明，并且为实线*/border-width: 5px;border-color: red transparent transparent transparent;  border-style: solid;position: absolute; /*绝对定位*/top: 6px;}</style>
</head>
<body>
<div>送至深圳<span></span>
</div>
</body>
</html>

CSS中易迅网三角形的制作相关推荐

python爬虫10万信息mysql_python爬虫：爬取易迅网价格信息，并写入Mysql数据库
#!/usr/bin/python # -*- encoding:utf-8 -*- '''思路:1.从易迅网爬取冰箱的数据,包括品牌,型号,价格,容积,能效等级,制冷方式,门款式,显示方式,定频/变 ...
易迅网被指私自改促销订单用户下单后被取消
商务部官员对电商价格战的劝阻,并未劝退各电商打价格战的步伐,反倒越发激烈,被腾讯控股的易迅也加入战局.不过近日多名用户向本报放映,他们下单订购了一款三星手机,比市场价便宜千元左右,但是随后易讯反悔了, ...
小米新机红米与QNAP NAS TS-212P易迅网同时首发
8月12日,易迅网新品首发频道发布小米新机红米手机与QNAP NAS新机TS-212P. 小米千元双卡双待神机红米+QNAP威联通千元顶级NAS TS-212P打造移动娱乐新体验,QNAP 提供多种移 ...
乐视腾讯深度合作超级电视26日易迅网首发
9月23日,乐视牵手腾讯旗下电商平台易迅网,宣布双方达成深度合作.易迅网将通过"集采.包销"的方式销售乐视TV·超级电视X60,这也是超级电视在第三方电商平台的首次发售,曾经创造了 ...
电商再赶“穿戴设备潮”易迅网推出智能手环
继谷歌推出智能眼镜之后,各大电商也开始推出自己的新产品,这次手机软件开发的新产品跟传统的不同,各企业继续推进"穿戴设备潮",你有眼镜,那我就有手环好了,同样很时尚. DoNews ...
易迅网接入微信支付，为消费者提供购物体验
8月20日消息,腾讯旗下电商网站易迅网今日宣布已在PC网页版.Android及iOS手机客户端全面支持微信支付. 消费者在易迅网页端下单并选择"微信支付"确认订单后,易迅网页上会生 ...
简单的商品信息爬虫——爬易迅网
收集到非常多易迅网的商品ID,于是想把这些ID相应的商品信息爬下来.通过简单分析发现.易迅网的各类信息都是直接放在HTML页面上.所以,解析一个页面就好了. 最后返回每一个ID相应的商品url,标题, ...
我来自台湾：普力600 消毒锭_普力-600 消毒片PL-600 SH-XT-K礼盒小套组_易迅发现_易迅网...
我来自台湾:普力600 消毒锭_普力-600 消毒片PL-600 SH-XT-K礼盒小套组_易迅发现_易迅网
维多利亚旅行者 V6004 时尚休闲商务双肩包黑色[价格行情报价] - 易迅网
维多利亚旅行者 V6004 时尚休闲商务双肩包黑色[价格行情报价] - 易迅网维多利亚旅行者 V6004 时尚休闲商务双肩包黑色[价格行情报价] - 易迅网维多利亚旅行者 V6004 ...

CSS中易迅网三角形的制作

CSS中易迅网三角形的制作相关推荐

最新文章

热门文章