css 实现一个带尖角的正方形

转载 2016年05月30日 12:01:13

css 实现一个带尖角的正方形

前些天在ife上看到了一个例题,题目如下:

<div id=”demo”></div>


刚看到这个题目觉得无从下手,感觉一般这种不都是一个背景图片吗,怎么还能用css写的?? 后来看到网友的答案,试着运行了一下发现真的和图上的一模一样,最伤心的是看到答案竟然还看不懂。。觉得自己还是好水,仔细琢磨了一下,现将心得整理一下:


实现图示的效果涉及到的知识主要有两点:一个是before、after伪元素,一个是border

1、before 和 after 都是css中的伪元素,他们俩用法都差不多,通过给定一个属性content给元素添加新的内容,不同的是before用来在元素前插入新内容,after用来在元素后面插入新内容。

比如有一个p元素:水

<p>水</p>
如果给这个p元素设置一个before:
p:before{
  content:"上海自来";
}
这个p就变成了:上海自来水,content属性的值就添加到了p元素内容的前面。

相反的,如果是用after:

p:after{
  content:"来自海上";
}
这个p就会变成:水来自海上。

简单的before、after使用就是这样,一开始看的时候觉得好简单,不就是插入个内容吗,但实际上插内容不算什么,最重要的是它能设!置!样!式!一旦给它设置各种各样的样式之后这个伪元素就厉害了,比如题目中的尖角,题目只给了一个div我们,但是很明显div只能弄出一个左边的带边框正方形,右边的尖角怎么来的呢,那就可以靠这个伪元素了。

思路很简单,先把正方形画出来,然后通过before或者after变出一个尖角出来,放到正方形右上角去。div如下:

#demo{
  width:100px;
  height:100px;
  background-color:#fff;
  border: 2px #000 solid;
}
好,这个时候正方形已经出来了,但是三角形怎么画出来呢,这就要用到border了


2、以前使用border都是border:1px #000 solid,顶多换换颜色和边框值,没想到画三角形也能靠它……

以前没发现的原因在于使用border的时候总是1px、2px的,太细了,当把边框变成20px的时候就有意思了,下面是一个边长10px的正方形设置其边框长也为10px:

我们知道可以通过设置border-left等等手动设置四个边框为不同颜色,分别设置之后:

马上看出靠谱,如果把这个div的宽度减小到0之后岂不就是四个三角形了,动手实验:

果然是,那把上下右的颜色变透明之后就能得到一个三角形拉,在这里要注意的是把其他三个边透明是能得到一个三角形的,但是如果只设置左边框而不设置其他三个边框是得不到的,自己动手试下便知,因为如果只设置左边框,而这个div的高度又为0,那这个左边框是不会向上下两端扩展的,只有当上或下也有边框时才会呈现出一个三角形,所以我们可以把所有边框透明掉,然后把左边框显示即可。比如下面这样:

diiv{
  width:0px;
  height:0px;
  border: 20px transparent solid;
  border-left-color: #000;
}
      就能得到这个效果了:

那把三角形放到正方形右侧就很简单了,有一点是那个正方形是缺了一段的,我们可以让三角形颜色为白色覆盖掉正方形的边框,另外再用一个黑色的比白色三角形大一点的三角形放在白三角形下面,这样就只漏出了三角形的两条边,所以这里同时用到了before和after。

因为before和after插入的三角形是放在指定的位置的,所以它们的position都设置为绝对定位,那么div就要设置成相对定位了:

#demo{
  width:100px;
  height:100px;
  border: 2px #000 solid;
  background-color:#fff;
  position:relative;
}


首先是黑色的三角形:

#demo:after{
  width:0px;
  height:0px;
  border: 10px transparent solid;
  border-left-color: #000;
  position:absolute;
  top:20px;
  left:100%;
  content:""
}

注意content虽然没有值,但是必须得加上。现在效果如下:

然后是比黑色三角形小一点点的白色三角形:

#demo:after{
  width:0px;
  height:0px;
  border: 8px transparent solid;
  border-left-color: #fff;
  position:absolute;
  top:22px;
  left:100%;
  content:""
}
注意白色三角形比褐色三角形要小,所以边框长度就小2px,且top也大2px,效果如下:

由此这个题目就做完拉,当然相同的样式可以整理下,最终样式如下:

			#demo{
			  width:100px;
			  height:100px;
			  border: 2px #000 solid;
			  background-color:#fff;
			  position:relative;
			}
			#demo:before, #demo:after{
			  width:0px;
			  height:0px;
			  border:transparent solid;
			  position:absolute;
			  left:100%;
			  content:""
			}
			#demo:before{
			  border-width:10px;
			  border-left-color: #000;
			  top:20px;
			}
			#demo:after{
			  border-width:8px;
			  border-left-color: #fff;
			  top:22px;
			}


博主也在学习css当中,文章难免有不足之处,还望大家指正!

以上就介绍了css 实现一个带尖角的正方形,包括了方面的内容,希望对HTML教程有兴趣的朋友有所帮助。

CSS制作三角标签

.spa{ width:0px; height:0px; border-bottom:100px solid; display:inline-block; border-right:100p...
  • qq348843576
  • qq348843576
  • 2016年01月16日 20:20
  • 246

css 实现一个带尖角的正方形

前些天在牛课网上看到了一个百度的面试题,题目如下: 请用CSS实现如下图的样式,相关尺寸如图示,其中dom结构为: 刚看到这个题目觉得无从下手,感觉一般这种不都是一个背景图片吗,怎...
  • u011366705
  • u011366705
  • 2015年02月09日 22:08
  • 4277

纯css实现尖角图形

css 实现一个带尖角的正方形 来源:网络整理     时间:2015-2-9 12:28:07     关键词: 本篇文章主要介绍了"css 实现一个带尖角的正方形",对...
  • OoOAriesOoO
  • OoOAriesOoO
  • 2016年04月05日 19:52
  • 1214

CSS现尖角对话框或带尖角的导航

CSS现尖角对话框或带尖角的导航最近在设计管理系统前端的信息显示。因为看到很多UI设计的信息显示都由带尖角的对话框组成,所以我也想试试手。浏览一些网上的资料之后,大概明白了怎么回事。尖角对话框的难度在...
  • cuihuang2014
  • cuihuang2014
  • 2016年04月11日 00:16
  • 1204

css3制作tab卡片选中小尖角

tab选项卡在网页中经常会用到,下面是制作一种箭头指示选中效果的写法。 实现效果 ...
  • MajorMayer
  • MajorMayer
  • 2016年03月31日 12:46
  • 1347

css实现尖角div

尖角在上面 效果图: 代码: 尖角div #top { width:400px; height:250px; border:3px solid; /* 边框宽度...
  • wyzhangchengjin123
  • wyzhangchengjin123
  • 2012年09月28日 23:27
  • 12797

用css样式画尖角

效果图(百度某年笔试题): #demo { width: 100px; height:...
  • z_Sherry
  • z_Sherry
  • 2015年08月06日 20:17
  • 779

CSS为div添加尖角样式

先来看一下尖角效果 一个div,右侧边框的上出现了一个尖角的形状。那么如何来实现这么一个效果呢? 1.原理 对于一个块级元素,但我们分别将元素的上下左右四个border设置成一个比较大的...
  • u010585448
  • u010585448
  • 2016年07月09日 12:06
  • 5120

DIV制作尖角效果

首先,来看一下一个div的边框放大很多倍到底是什么样的: div{ width:0px; height:0px; border-top:50px solid red; borde...
  • fengqingyundan1200
  • fengqingyundan1200
  • 2014年12月19日 10:20
  • 823

CSS制作响应式正方形及其应用

CSS制作响应式正方形?什么鬼?干嘛用的?干嘛用的没人有每人的需求,本人也正好是因为公司正在做的业务需要,想做个照片展示的功能(当然得符合响应式了)。而这个照片展示必须符合以下几点功能:1,用三张图片...
  • u010571913
  • u010571913
  • 2015年07月27日 15:00
  • 1437
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css 实现一个带尖角的正方形
举报原因:
原因补充:

(最多只允许输入30个字)