css2----实现三角形和带角框

最新推荐文章于 2022-04-25 20:43:06 发布

Mr.Gu

最新推荐文章于 2022-04-25 20:43:06 发布

阅读量100

点赞数

原文链接：http://www.cnblogs.com/webkey-wzy/p/4053609.html

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
<style>
    /*三角形*/
  /* div{width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid;} */
    /*带角框*/
    div{width:100px;height:100px;border:2px solid;}

    div::before{content:"";display:block;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid black;position:relative;top:10px;left:100px;}
    div::after{content:"";display:block;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid white;position:relative;top:-6px;left:98px;}
    
</style>
</head>
<body>
<div></div>

</body>
</html>

实现三角形的原理：1，div的border生成是向外扩的，2,当div有相邻border时，拐角处会以一种各占一半的三角拼合。所以当设这div的宽高为0和0时，如果它有四个border的话，就会组成一个正方形，每边分别为一个等腰三角形，此时若设任意三边对望的两个边为透明色（transparent）时，剩下的一边为一个等腰三角形。

带角框实现原理：利用两个三角形的相对定位使产生视觉上的相减形成不闭合的角号（“>”）。

转载于:https://www.cnblogs.com/webkey-wzy/p/4053609.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Mr.Gu

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css2----实现三角形和带角框

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title><style> /*三角形*/ /* div{width:0;height:0;border-top:10px ...
复制链接

扫一扫