首页 > 试题广场 >

请用CSS实现如下图的样式，相关尺寸如图示，其中dom结构为

[问答题]
请用CSS实现如下图的样式，相关尺寸如图示，其中dom结构为：
<div id=”demo”></div>
查看答案及解析
添加回答
推荐
一只咕咕咕头像 一只咕咕咕 
#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;
}

编辑于 2014-12-05 10:29:26 回复(4)
rebug头像 rebug 
#demo {
    position: relative;
    width: 100px;
    height: 100px;
    border: 2px solid #000;
    background-color: #FFF;
}
#demo::before,
#demo::after {
    content: "";

    position: absolute;
    top: 20px;
    left: 100%;

    display: block;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-right-width: 0;
}
#demo::before {
    border-left-color: #000;
    margin-left: 2px;
}
#demo::after {
    border-left-color: #FFF;
}

发表于 2015-03-31 18:34:14 回复(1)
帅到被人砍___头像 帅到被人砍___ 
/*即通过绝对定位，用一个小一圈（10px）的白色三角形遮盖住大一圈（12px）的黑色三角形，形成一个2px的黑色外边框。*/
发表于 2017-04-25 20:50:02 回复(0)
陌上头像 陌上 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
	<title></title>
</head>
<style type="text/css">
	.one{
		width: 100px;
		height: 100px;
		border:2px solid #000;
		position: relative;
		background-color: #fff;
	}
	.one:before{
		content: "";
	    width: 0px;
	    height: 0px;
	    border: 10px solid transparent;
	    border-left-color: #000;
	    position: absolute;
	    top: 20px;
	    left: 100%;
	}
	.one:after{
		content: "";
		border: 8px solid transparent;
		border-left-color: #fff;
		position: absolute;
		top: 22px;
		left: 100%;
	}
</style>
<body>
<div class="one"></div>
</body>
</html>

编辑于 2015-09-11 20:02:08 回复(0)
凛时雨头像 凛时雨 
#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;
}
发表于 2014-12-23 08:43:43 回复(0)
小七加油头像 小七加油 
#demo {
	width: 100px;
	height: 100px;
	border: 2px solid #000;
	position: relative;
} 
#demo:after {
	content: '';
	display: block;
	width: 14.1421px;
	height: 14.1421px;
	border-top: 2px solid #000;
	border-right: 2px solid #000;
	position: absolute;
	right: -10px;
	top: 20px;
	transform: rotate(45deg); 
	background-color: #fff;
}

解题思路：
将三角形用一个正方形来实现
设置其上border,右border的宽度
设置其背景颜色为白色以覆盖掉父元素的border
使用transform: rotate 来让该正方形旋转
使用top,left来对其定位


编辑于 2015-09-17 00:01:51 回复(6)
Show.头像 Show.

知识扩展：

可用css中的border实现：

width:0;

height:0;

border-right:10px solid red;

border-top:10px solid transparent;//设置透明

border-bottom:10px solid transparent;

三角形 顶点在哪边 就 不设置哪边的border值 ，三角形向左或向右，则设置border的顶部和底部为相同像素的透明色。三角形的高则为像素的点素，即px值。

 

<div id="demo">

  <div id="a"></div>

  <div id="b"></div>

</div>

解题思路：

1、 id为demo的实际宽度等于宽度100px+2px=102px;

2、 设置a、b同时以demo为标准向左偏移100px，即可覆盖2px的边框。

3、 设置a的边框大小为12px;背景色为黑色；

   设置b的边框大小为10px，背景色为白色；

   b相对a向下偏移2px,即可得到边框为2px的三角边；

即该效果：

 

代码实现：

#demo1 {

    width: 100px;

    height: 100px;

    background-color: #fff;

    position: relative;

    border: 2px solid #333;

}

#a,#b

{

width:0;

height:0;

position:absolute;

left:100px;

border:solid transparent;

}

#a

{

top:18px;

border-width:12px;

border-left-color:#000;

}

#b

{

top:20px;//b的top值要比a多2px

border-width:10px;

border-left-color:#fff;

}


根据该思路，将a,b换成：before，：after的伪元素选择器，content设为' ',即可。
发表于 2015-09-04 20:48:34 回复(7)
我会吐泡泡～头像 我会吐泡泡～ 
#demo {
	position: relative;
    width: 100px;
    height: 100px;
    background-color: #fff;
    border: 2px solid #333;
}
 
#demo:after, #demo:before {
    content: ' ';
	width: 0;
    height: 0;
	border: 12px solid transparent;
	top: 18px;
    position: absolute;
}
 
#demo:after {
    border-left-color: #fff;
	left:100px;
}
 
#demo:before {
    border-left-color: #000;
	left: 102px;
}
思路：两个三角形，一个黑色一个白色，边框大小，距顶部top都相同，只有位置和颜色不同，让白色的覆盖住黑色往左移动2px即可
发表于 2022-09-19 17:18:48 回复(0)
李嘉滢头像 李嘉滢
#demo {
            width: 100px;
            height: 100px;
            background-color: #fff;
            border: 2px solid #000;
        }
after 和 before 都是向右的三角形 after是黑色的 before是白色的 用白色的三角形盖住一部分黑色的三角形就能有一种黑色三角边框的感觉
        #demo:after{
            content: "";
            position: absolute;
            top:10px;
            left: 100px;
            border-top:10px solid transparent;
            border-bottom: 10px solid transparent;
            border-left: 20px solid #000;
        }
        #demo:before{
            content: "";
            position: absolute;
            top:10px;
            left: 97px;
            border-top:10px solid transparent;
            border-bottom: 10px solid transparent;
            border-left: 20px solid #fff;
            z-index: 99; 
        }
发表于 2020-08-23 15:30:46 回复(0)
mzry头像 mzry
        #demo{
            width:100px;
            height: 100px;
            background-color: #fff;
            position: relative;
            border:2px solid #000;
        }
        #demo:before,#demo:after{
            content: '';
            height: 0;
            width: 0;
            left:100%;
            position: absolute;
        }
        #demo:before{
            top:20px;
            border:10px solid transparent;
            border-left-color: #000; 
        }
        #demo:after{
            top:22px;
            border:8px solid transparent;
            border-left-color: #fff;
        }
    </style>
发表于 2018-04-18 16:18:44 回复(0)
蛰伏头像 蛰伏
#id{
   width:100px;
   height:100px;
   positon:relative;
   background-color:#fff;
   border:2px solid #000;
}
#id::after{
  content:" ";
  position:absolute;
  right:-20px;
  top:20px;
  border:10px solid transparent;
  border-left-color:#fff;
}
发表于 2017-07-10 21:25:21 回复(0)
你以为你以为的就是你以头像 你以为你以为的就是你以
#demo
{
width: 100px;
height: 100px;
border: 2px solid #000;
margin: 0 auto;
background-color: #fff;
position: relative;
}
#demo .sjx
{
position: absolute;
top: 20px;
left: 91px;
width: 18px;
height: 18px;
background-color: #fff;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
transform: rotate(-45deg);

}

       <div id="demo">
<div class="sjx">
</div>
</div>
发表于 2017-03-14 11:27:57 回复(0)
TeresaLiuLuLu头像 TeresaLiuLuLu
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #icon1{
            position: absolute;
            display: inline-block;
            width: 0;
            height: 0;
            border-width: 10px;
            border-style: solid;
            border-color: red green blue pink;
            left: 10px;
            top: 10px;
        }
        #icon2 > i{
            position: absolute;
            display: inline-block;
            width: 0;
            height: 0;
            border-width: 10px;
            border-style: solid;
            top: 60px;
        }
        #icon2 > i:first-child{
            left: 15px;
            border-color: transparent transparent transparent black;
        }
        #icon2 > i:last-child{
            left: 15px;
            border-color: transparent transparent transparent white;
        }
        #icon3{
            width: 150px;
            height: 200px;
            position: absolute;
            left: 10px;
            top: 150px;
            border: 1px solid black;
        }
        #icon3:before,#icon3:after{
            content: '';
            display: inline-block;
            position: absolute;
            width: 0;
            height: 0;
            border-width: 15px;
            border-style: solid;
            top: 20px;
        }
        #icon3:before{
            right: -31px;
            border-color: transparent transparent transparent black;
        }
        #icon3:after{
            right: -29px;
            border-color: transparent transparent transparent white;
        }
    </style>
</head>
<body>
    <div id="icon1"></div>
    <div id="icon2">
        <i></i>
        <i></i>
    </div>
    <div id="icon3">
        <i></i>
        <i></i>
    </div>
</body>
</html>
发表于 2017-03-06 15:04:25 回复(0)
yangxiaorong头像 yangxiaorong 

	
	

		
		

			
			
				
				

					
					
						
						

							
							

								<!DOCTYPE html>
							


							

								<html>
							


							

								<head>
							


							

								    <title>texst</title>
							


							

								    <metacharset="utf-8">
							


							

								    <styletype="text/css">
							


							

								        .big{
							


							

								            width:100px;
							


							

								            height:100px;
							


							

								            border:1px solid black;
							


							

								            float:left;
							


							

								        }
							


							

								        .smallOne{
							


							

								            float:left;
							


							

								            width:0px;
							


							

								            height:0px;
							


							

								            border-width:10px;
							


							

								            border-style: solid;
							


							

								            border-color:transparent transparent transparent black;
							


							

								            margin-top:20px;
							


							

								        }
							


							

								        .smallTwo{
							


							

								            float:left;
							


							

								            width:0px;
							


							

								            height:0px;
							


							

								            border-width:10px;
							


							

								            border-style: solid;
							


							

								            border-color:transparent transparent transparent white;
							


							

								            margin-top:20px;
							


							

								            margin-left: -21px;
							


							

								        }
							


							

								 
							


							

								    </style>
							


							

								</head>
							


							

								<body>
							


							

								<divid="demo">
							


							

								    <divclass="big"></div>
							


							

								    <divclass="smallOne"></div>
							


							

								    <divclass="smallTwo"></div>
							


							

								</div>
							


							

								</body>
							


							

								</html>

发表于 2016-12-28 15:24:56 回复(0)
Simple53头像 Simple53 
#demo{ width:98px;  height:98px;  background-color: #FFF;  border: 2px solid #000;  position: relative; }

#demo:after{ content: '';  position: absolute;  width: 20px;  height: 20px;  border: 2px solid transparent;  border-left-color: black;  border-bottom-color: black;  transform: rotate(-135deg);  right: -12px;  top: 20px; }

#demo:before{

content: '';

 position: absolute;

 background-color: #FFF;

 width: 20px;

 height: 20px;

 transform: rotate(45deg);

 right: -12px;

 top: 20px;

 border: 2px solid #FFF;

}

发表于 2016-12-12 20:49:00 回复(0)
湫天头像 湫天
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        #dome{
               width:100px;
                height:100px;
                 background-color:#fff;
                border:2px solid #000;
                position:relative;
        }
        #dome:after{
            content:" ";
            width:15px;
            height:15px;
            border-top:2px solid #000;
            border-right:2px solid #000;
            background-color:#fff;
            transform:rotate(45deg);
            position:absolute;
            top:20px;
            right:-10px;
    }
    </style>
</head>
<body>
    <div id="dome"></div>
</body>
</html>

发表于 2016-10-10 16:35:04 回复(0)
mzvast头像 mzvast 
#demo{
    width:100px;
    height:100px;
    border:#000 2px solid;
    background-color:#fff;
}
那个突起是什么鬼
发表于 2016-09-04 14:08:17 回复(0)
牛客8189564号头像 牛客8189564号
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
        *{
        padding: 0;
        margin: 0;
        }
.demo{
width: 100px;
height: 100px;
border: 2px solid #000;
background-color: #fff;

}
.small{
position: absolute;
left: 104px;
top: 20px;
width: 0;
height: 0;
border: 10px solid;
border-color:   transparent transparent transparent black;
}
.box{
width: 0;
height: 0;
border: 10px solid;
position: absolute;
border-color:   transparent transparent transparent white;
left: 102px;
top: 20px;
}
        </style>
    </head>
    <body>
    <div class="demo">
   
    </div>
    <div class="small"></div>
    <div class=" box"></div>
    </body>
</html>
发表于 2016-08-31 13:28:02 回复(0)
哼哼哼着小曲儿头像 哼哼哼着小曲儿
<style type="text/stylesheet">
#demo{
       width: 100px;
       height: 100px;
       border: 2px solid #000;
       background: #fff;
}
</style>
<div id="demo">
</div>
发表于 2016-08-29 13:23:54 回复(0)
挣钱买包包头像 挣钱买包包
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    #demo {
        width: 100px;
        height: 100px;
        border: 2px solid #000;
        background-color: #fff;
        position: relative;
    }
    
    #demo1 {
        height: 0px;
        width:  0px;
        border: 20px solid transparent;
        border-right: 0 none;
        border-left-color:green;
        background-color: #fff;
        position: absolute;
        top: 20px;
        left:100px;
        
    }
</style>
</head>
做成这样了
发表于 2016-08-12 11:40:29 回复(0)
牛客118926号头像 牛客118926号
<style>
#demo{width:100px;height:100px;}
</style>
<div id="demo">
</div>
发表于 2016-04-21 22:31:51 回复(0)
提交观点

问题信息

前端工程师 2015 百度 HTML
来自：百度2015前端研发笔试卷
上传者：小小
难度：
91条回答 30311浏览

热门推荐

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号