问题引出:
最近在写ife作业的时候,边写边查资料,查着查着就偏题了,看到一个网页中的“小三角”很好看(很不好意思,那个网页地址给忘了),不自觉的按下F12,看看有没有源码可以借鉴一下,很简单地就找到了,哈哈,很开森。对了,实现的效果大致如下图:
针对上面的效果,本人目前有三种实现方式(相信还有其他好的实现方式),下面一一介绍:
1)第一种方式(“实心小三角”):
此种方式主要是将宽高全置为0,通过设置伪元素的border样式来实现的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有趣的小三角实现方式</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.dv1{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 300px;
height: 300px;
background: #FFF;
box-sizing: border-box;
border: 1px solid #CCC;
}
.dv1::after{
content: "";
width: 0;
height: 0;
display: inline-blo