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

前些天在牛课网上看到了一个百度的面试题，题目如下：

请用CSS实现如下图的样式，相关尺寸如图示，其中dom结构为：
<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:before{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 实现一个带尖角的正方形相关推荐

css聊天气派,css如何实现小尖角聊天对话框带尖角的说话泡泡效果
css如何实现小尖角聊天对话框带尖角的说话泡泡效果发布时间:2021-03-20 09:44:20 来源:亿速云阅读:58 作者:小新这篇文章主要介绍了css如何实现小尖角聊天对话框带尖角的说话 ...
[css] 请使用CSS画一个带锯齿形边框圆圈
[css] 请使用CSS画一个带锯齿形边框圆圈 @import 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试题
用 CSS 画一个带阴影的三角形
1. 思路怎么用CSS画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题假设我们做一个向下的三角形箭头常见的方法大致有两种 ...
使用CSS定义一个和屏幕宽度一样正方形容器
使用CSS定义一个和屏幕宽度一样正方形容器介绍一下如何使用CSS定义一个和屏幕宽度一样正方形容器. 问题有时候,我们在移动端需要做一个商品展示页面,一打开页面,屏幕的上面一半展示为商品的图 ...
html矩形加三角,html如何绘制带尖角（三角）的矩形
结合实际情况自己写的: .menu_triangle { height: 10px; width: 10px; background-color: #049888; transform: transl ...
HTML实现友好提示框(带尖角的框)
友好提示框的主要实现难点就是哪个尖角的问题,其实只要搞清楚三角形的实现原理,实现这种效果也并不难,下面介绍两种实现方法,一种是通过边框实现的三角形通过叠加实现,另一种是通过正方形旋转实现首先我们讲述 ...
css加三角阴影,用CSS画一个带阴影的三角形的示例代码
1. 思路怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题假设我们做一个向下的三角形箭头常见的方法大致有两种 ...
html、css做一个带搜索图标的搜索框
html.css图像代替提交按钮做个搜索框图像形式的提交按钮与普通提交按钮在功能上基本相同,只是它用图像代替了默认的提交按钮,外形上更加美观.需要注意的是,必须为其定义src属性指定图像的url地 ...
css 实现一个尖角_纯 CSS 实现三角形尖角箭头的实例
上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 ,但没有怎么用上,也没有详细完整的实例,今天刚好要用上,整理了下,写个完整的代码: 无标题文档 .area { margin:100px a ...
纯 CSS 实现三角形尖角箭头的实例
为什么80%的码农都做不了架构师?>>> 上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/ ...

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

css 实现一个带尖角的正方形相关推荐

最新文章

热门文章