·您当前的位置:主页 > 技术教程 > Html5技术 >

[CSS]用css中的border画三角形

时间:2017-09-05 18:14酷播
相信大家都知道border-color是控制边框颜色的,但是你可能没这样试过,来看下面的代码

相信大家都知道border-color是控制边框颜色的,但是你可能没这样试过,来看下面的代码:

html:

<div class="div"></div>

css:

.div {
    width: 100px;
    height: 100px;
    border: 50px solid transparent;
    border-color: yellow green red aqua;
}

这样的结果为:原来css中的border还可以这样玩4

思考一:如果该div没有宽高会怎样?

实现结果:原来css中的border还可以这样玩5

思考二:前面的效果得到的是四个三角形,我们有没有什么办法将三角形从那个div中分离出来呢?

思路:目前没有接触过有关div分离的(具体也应该不存在吧),但是我们来扣一扣CSS的定义“层叠样式”,转换我们的思维,我们有没有什么方法将我们不想要的三角形覆盖掉?

具体做法:将我们需要的那边的颜色设置为我们的背景色–白色,对的这样就可以得到我们想要的效果。代码如下(以想要上边的三角形为例):

border-color: yellow white white white;

是不是这样就算完成我们的三角形效果了呢?

我们可以试试修改整个body的背景颜色为黑色,看有什么变化:原来css中的border还可以这样玩6

发现该div仍占据着那么大的空间,并且背景颜色设置为白色并不是最科学

思考四:我们该如何将不想要的颜色设置为消失呢?

思路:我们将不想要表现出来的颜色设置为父级容器的背景色,border-color: yellow transparent transparent transparent;

结果如下:原来css中的border还可以这样玩7

思考三:我们如何将div设置不占那么大的空间呢?

思路:直接将想要的三角形的对边的border的宽度去掉

具体做法:(这次以想要下面的三角形为例),代码如下:

div{
width:0px;
height: 0px;
border-bottom: 50px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}

结果如图:原来css中的border还可以这样玩8

热门文章

请稍候...
  • 热身双十一,锁定云视频大聚惠
  • 备战双十一,相约直播超值狂欢
保利威视云直播
保利威视云视频
微信付费直播
酷播云免费在线视频整体解决方案
酷播v4.0网页播放器