用CSS创造三角形案例

6.3.2 用CSS创造三角形

用div来创建，角上是平分的，所以要是内部宽高为0，其他边透明，正好是三角形。

代码

div {border: 12px solid;width: 0;height: 0;border-color: transparent red transparent transparent;
}

与伪元素after结合起来,在6.3.弹出层.html中增加CSS:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>figure {width: 144px;height: 153px;margin: 20px 20px;border: 1px solid #666;position: relative;float: left;}img {width: 144px;height: 153px;display: block;}figcaption {display: none;/* 隐藏弹出层 */position: absolute;/* 相对于容器 */left: 74%;/* 放到右边 */top: 15px;width: 130px;/* 弹出层宽度 */padding: 10px;/* 弹出层内边距 */background-color: #f2eaea;border: 3px solid red;border-radius: 6px;}/* 鼠标悬停在图片上显示 */figure:hover figcaption {display: block;}figcaption h3 {/*弹出层的内容*/font-size: 14px;color: #666;margin-bottom: 6px;}figcaption a {/*弹出层的内容*/display: block;text-decoration: none;font-size: 12px;color: #000;}/* 把弹出层设置为最高层 */figure:hover figcaption {display: block;z-index: 2;}/* 红色三角形盒子 */figcaption::after {content: "";position: absolute;border: 12px solid;border-color: transparent red transparent transparent;height: 0px;width: 0px;top: 17px;right: 100%;}</style>
</head><body><figure><img src="img/pink.jpg" alt="pink heels" /><figcaption><h3>Pink Platforms</h3><a href="#">More info</a></figcaption></figure><figure class="click_me"><img src="img/baowen.jpg" alt="baowen heels" /><figcaption><h3>Leopard Platforms</h3><a href="#">More info</a></figcaption></figure><figure class="click_me"><img src="img/red.jpg" alt="red heels" /><figcaption><h3>Red Platforms</h3><a href="#">More info</a></figcaption></figure>
</body></html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/54284.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！