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

来源：互联网发布：店铺陈列数据分析报告编辑：程序博客网时间：2024/04/29 12:27

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

请用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>

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

0 0