欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

操作Css绘制三角形的要领及拓展

发布时间:2016-11-24  编辑:杨雨个人博客网站   点击:   

以下是常用的三角形外形

操纵Css绘制三角形的方式及拓展

着实都是Html+Css就能实现,很简朴

代码如下:

第一种要领

Html代码:


代码如下:
<!-- 向上 -->
<div class="top_triangle"></div>
<!-- 向下 -->
<div class="bottom_triangle"></div>
<!-- 向左 -->
<div class="left_triangle"></div>
<!-- 向右 -->
<div class="right_triangle"></div>

Css代码


代码如下:
/*向上*/
.top_triangle{
width:0;
height:0;
border-bottom:30px solid green;
border-right:30px solid transparent;
border-left:30px solid transparent;
}
/*向下*/
.bottom_triangle{
width:0;
height:0;
border-top:30px solid black;
border-right:30px solid transparent;
border-left:30px solid transparent;
}
/*向右*/
.left_triangle{
width:0;
height:0;
border-top:30px solid transparent;
border-left:30px solid yellow;
border-bottom:30px solid transparent;
}
/*向左*/
.right_triangle{
width:0;
height:0;
border-top:30px solid transparent;
border-right:30px solid red;
border-bottom:30px solid transparent;
}

第二种要领

以上代码即是实现上下阁下偏向三角形的代码;然而着实不难发明,着实它们之间有个配合点,都是由border中的top、right、bottom、left实现的,因此我们尚有一种写法,通过实现配置一个div的border,让其潜匿掉,再给个中一个偏向颜色,该偏向的三角形就能显现出来,好比实现向上偏向的三角形的Css代码:


代码如下:
.top_triangle{
width:0;
height:0;
//将其先潜匿掉,再表现。
border:30px solid transparent;
border-bottom:30px solid green;
}

其余偏向的就相相同,就纷歧一举例了。

一点tips
假如当真实行敲过这个代码的读者或者会发明,以第一种要领的例子例如,都给border配置了三个偏向的值,好奇的人会想,只配置两个行可能一个行吗?敲敲就知道啦~

实践中汇报我,配置一个可能两个但配置相反偏向上的border值的都不会表现出来,可以试试;可是假如两此中,差异偏向上的两个值是会表现出来的,至于是什么外形,就看你选的偏向了。实践出真知!

实现的根基领略(利便记)
图片中最左方的正方形Css代码如下:


代码如下:
.all_triangle{
width:0;
height:0;
border-top:30px solid black;
border-left:30px solid yellow;
border-right:30px solid red;
border-bottom:30px solid green;
}

加上在代码中呈现最多的transparent(我领略潜匿掉),就不难领略,着实也就是将一个盒模子中的padding+content,用width+height都配置为零干掉,然后给让border谨慎登场,配置响应的值,虽然这些值都是必需的,然后呢,将要显现出来的表现,该潜匿的就潜匿,第一种要领中爽性就省略了一个(也只能是一个),至于巨细颜色位置就随你配置了 。

延长
Css3中的border-radius,有个图案如下

操纵Css绘制三角形的方式及拓展

应用蛮多的

其拭魅这个的实现用border也行。代码如下:


代码如下:
.eatFace{
width:0;
height:0;
border:30px solid red;
border-radius:50%;
border-right:30px solid transparent;
}</p> <p>

至于道理,假如各人读懂了三角形的,这个不难领略。

总结
以上就是操作Css绘制三角形的要领及拓展的所有内容了,但愿本文的内容能对各人进修可能行使Css有所辅佐,假若有疑问各人可以留言交换,感谢各人对杨雨小我私人博客的支持。

本文地址:http://itbyc.com/web/css3/13176.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1