百度面试题--盒子凸起一个角效果实现的讨论

今天联系百度面试题的时候,看到了一道题:

请用CSS实现如下图的样式,相关尺寸如图示,其中dom结构为:
<div id=”demo”></div>


我很感兴趣,想了一下就做出来了,不过我做的效果大致上一样,只是数据上对不上,只好记录下我的思路。

给的答案如下:思路就是先用:before在目的位置做出一个黑色大三角形,然后用:after在该位置做出一个小白色三角形,白色三角形比黑色三角形小,这样留出的宽度就看起来就像border,实现了预定的效果。

<!DOCTYPE html>
<head>
<meta charset="uft-8">
<title>coding.....</title>
<style type="text/css">
#demo {
    width: 100px;
    height: 100px;
    background-color: #fff;
    position: relative;
    border: 2px solid #333;
}
 
#demo:after, #demo:before {
    border: solid transparent;
    content: ' ';
    height: 0;
    left: 100%;
    position: absolute;
    width: 0;
}
 
#demo:after {
    border-width: 10px;
    border-left-color: #fff;
    top: 20px;
}
 
#demo:before {
    border-width: 12px;
    border-left-color: #000;
    top: 18px;
}
</style>
</head>
<body>
<div id="demo"></div>
</body>
</html>

我的思路不一样:做一个小正方形,旋转45度,移动一定距离使其两条边漏出来,两条边在正方形内,然后将正方形内的边隐藏掉。

<!DOCTYPE html>
<head>
<meta charset="uft-8">
<title>coding.....</title>
<style type="text/css">
#demo {
	width: 100px;
	height: 100px;
	border: 2px solid black;
	position: relative;
}
#demo:before {
	border:2px solid black;
	border-left:transparent;
	border-bottom:transparent;
	content: ' ';
	position: absolute;
	top: 23px;
	right: -13px;
	width: 20px;
	height: 20px;
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	background-color: white;
}
</style>
</head>
<body>
<div id="demo"></div>
</body>
</html>

只不过移动的距离不是整数,而且边款线粗细也不同,无奈只好放弃了该想法,还是看官方的答案,自己的留作思路,以后遇到类似的,数值如果正好的话就可以用了。

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页