您的位置: 首页  >  文章  >  关于css中的三角形

关于css中的三角形

分类: 文章 • 2022-10-28 16:53:37

使用边框法实现css的三角形

先回忆一下border

border简写属性在一个声明设置所有的边框属性。可以按照顺序设置如下属性：

  • border-width
  • border-style
  • border-color
  • 每个属性又可以单独设置，还可以针对4边进行分别设置例如：border-top-width，border-left-style等。

border-width

为属性设置边框宽度，只有当边框样式不是none的时候才起作用。如果边框样式是none，边框实际上会被置为0，而且不允许有负值。

它的可能值有：thin  medium  thick  length  inherit


border-style

可以参考：https://developer.mozilla.org/en-US/docs/Web/CSS/border-style

具体样式／取值，如下图

关于css中的三角形

border-color

可以设置1-4中颜色属性，可能值有：color_name, hex_number, rgb_number, transparent, inherit

PS：始终把border-style的属性设在border-color之前。因为元素要先获得边框样式才能设置颜色呀！

进入正题

利用border来画三角形

关于css中的三角形







height: 10px;
width: 10px;
overflow: hidden; /* 这里设置overflow， font-size， line-height */
font-size: 0; /*是因为， 虽然宽高度为 0， 但在 IE 6 下会具有默认的 */
line-height: 0; /* 字体大小和行高， 导致盒子呈现被撑开的长矩形 */
border-color: #FF9600 #3366ff #12ad2a #f0eb7a;
border-style: solid;
border-width: 20px;





接着把宽度和高度缩小为0


关于css中的三角形








height: 0;
width: 0;
overflow: hidden; /* 这里设置overflow， font-size， line-height */
font-size: 0; /*是因为， 虽然宽高度为 0， 但在 IE 6 下会具有默认的 */
line-height: 0; /* 字体大小和行高， 导致盒子呈现被撑开的长矩形 */
border-color: #FF9600 #3366ff #12ad2a #f0eb7a;
border-style: solid;
border-width: 20px;






然后我只想要上边橙色的三角形呢？把其他三个三角形的颜色边成透明的就好啦


关于css中的三角形








height: 0;
width: 0;
border-color: #FF9600 transparent transparent transparent;
border-style: solid;
border-width: 20px;









我又想要被分成两个颜色的正方形呢？把4边的border俩俩设置成一个颜色吧


关于css中的三角形








height: 0;
width: 0;
border-color: #FF9600 #FF9600 #3366ff #3366ff;
border-style: solid;
border-width: 20px;











想要这样的形状的呢？上边的三角形不见了呀，把border-top-width置为0或者把border-top-style设置为none。


关于css中的三角形








height: 0px;
width: 0px;
border-color: #FF9600 #3366ff #12ad2a #f0eb7a;
border-style: solid;
border-width: 0 20px 20px 20px;






border-style: none solid solid solid;
border-width: 20px;








还想要随心所欲的三角形呢？可以通过设置边框的颜色和大小进行控制


关于css中的三角形








height: 0px;
width: 0px;
border-color: #FF9600 #FF9600 transparent transparent;
border-style: solid;
border-width: 20px 0px 20px 45px;






看到三角形就想起了气泡框了


关于css中的三角形


把写好的三角形采用为元素和矩形框链接在一起吧! 使用relative和absolute定位将两者定位




.bubble{
    height: 60px;
    width: 200px;
    background-color: #FF9600;
    position: relative;
    margin: 100px;
}
.bubble:before{
    position: absolute;
    content: '';
    height: 0px;
    width: 0px;
    border-color: transparent transparent #FF9600 transparent;
    border-style: solid;
    border-width: 20px;
    top: -40px;
}





实心气泡框，嗯哼？？我想要空心的。


我的想法是这样的，先实现一个向demo 1 一样的有宽高度的正方形，隐藏两边border，旋转和矩形拼接在一起。同时把背景颜色设置为白色挡住了矩形的蓝色边框。但是仔细看，发现两个元素的接缝处存在一点白色。看到文章的你如果知道怎么解决请给我留言，或者把原因告诉我，感谢感谢


关于css中的三角形




#bubble{
    height: 60px;
    width: 200px;
    position: relative;
    margin: 100px;
    background: white;
    border: 10px solid deepskyblue;
}
#bubble:after{
    position: absolute;
    content: '';
    height: 30px;
    width: 30px;
    border-color: deepskyblue transparent transparent deepskyblue;
    border-width: 10px;
    border-style: solid;
    top:35px;
    left:100px;
    transform: rotate(225deg);
    background-color: white;
}





关于css中的三角形


感谢：


http://taobaofed.org/blog/2010/08/05/css-border-hack/


根据自己的理解做个小记录
															

																					

								

									相关推荐