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 实现一个带尖角的正方形

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

CSS圆角,尖角,投影实现

border-radius属性 CSS3圆角只需设置一个属性:border-radius(含义是"边框半径")。你为这个属性提供一个值,就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用:...
  • enterys
  • enterys
  • 2012年05月08日 19:04
  • 1734

基于CSS实现的尖角提示符

CSS实现的尖角提示 一、概述      尖角提示符在项目中经常用到,很多框架也集成了这个功能,比如mui的popover、bootstrap的popwindow,在一般的项目中基本够用,...

css实现尖角div

以下内容转自wyzhangchengjin123的博客 http://blog.csdn.net/wyzhangchengjin123/article/details/8028905 尖角在...

纯CSS实现聊天框小尖角、气泡效果

经常看到这样的尖角,以前不懂,以为都是用图片做出来的,后来惊奇的发现,原来很多都是用CSS做出来的,既美观又节省资源,真是两全其美啊! 那么,用CSS怎么实现这种效果呢?首先,来写一个简单的...

纯CSS实现聊天框小尖角、气泡效果

前端工程师待遇 网站设计 网站制作模板 那么,用CSS怎么实现这种效果呢?首先,来写一个简单的代码: ...

CSS为div添加尖角样式

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

js带尖角的div弹出层

  • 2009年08月19日 17:26
  • 5KB
  • 下载

css3制作tab卡片选中小尖角

tab选项卡在网页中经常会用到,下面是制作一种箭头指示选中效果的写法。 实现效果 ...

告别图片—使用字符实现兼容性的圆角尖角效果beta版

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=332 一、前...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css 实现一个带尖角的正方形
举报原因:
原因补充:

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