CSS总结--百度面试题

最新推荐文章于 2018-04-15 08:24:22 发布

这个名字居然也有

最新推荐文章于 2018-04-15 08:24:22 发布

阅读量426

点赞数

分类专栏：前端 css

本文链接：https://blog.csdn.net/my_secret_name/article/details/52769954

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

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

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">

#demo
{
width:100px;
height:100px;
background:#fff;
border:2px solid #000;
position:relative;
}
#demo:before
{
content:"";
position:absolute;
top:23px;
left:100%;
z-index:1;
border-top:7px solid transparent;
border-left:7px solid #fff;
border-bottom:7px solid transparent;
}
#demo:after
{
content:"";
position:absolute;
top:20px;
left:100%;
z-index:-1;
border-top:10px solid transparent;
border-left:10px solid #000;
border-bottom:10px solid transparent;
}
</style>
</head>
<body>
<div id="demo"></div>
</body>

</html>

或者

#demo{
width: 100px;
height: 100px;
border:2px solid #000; //左边的矩形框
position: relative;
margin-right: 10px;
}
#demo:after{
content: "";
position: absolute;
left: 110px;
border:solid transparent;
top: 20px;
border-width: 10px;
border-left: 10px solid #fff;
}
#demo:before{
content: "";
position: absolute;
left: 110px;
border:solid transparent;
top: 18px;
border-width: 12px;
border-left: 12px solid #000;
}

这个名字居然也有

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS总结--百度面试题

请用CSS实现如下图的样式，相关尺寸如图示，其中dom结构为：#demo{width:100px;height:100px;background:#fff;border:2px solid #000;position:relative;}#demo:before{content:"";posit
复制链接

扫一扫