首页 > 试题广场 >

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

知识扩展:

可用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 {
            width100px;
            height100px;
            background-color#fff;
            border2px solid #000;
        }
after 和 before 都是向右的三角形 after是黑色的 before是白色的 用白色的三角形盖住一部分黑色的三角形就能有一种黑色三角边框的感觉
        #demo:after{
            content"";
            positionabsolute;
            top:10px;
            left100px;
            border-top:10px solid transparent;
            border-bottom10px solid transparent;
            border-left20px solid #000;
        }
        #demo:before{
            content"";
            positionabsolute;
            top:10px;
            left97px;
            border-top:10px solid transparent;
            border-bottom10px solid transparent;
            border-left20px solid #fff;
            z-index99
        }
发表于 2020-08-23 15:30:46 回复(0)
        #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)
<!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)
<!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)
#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)
#demo{
    width:100px;
    height:100px;
    border:#000 2px solid;
    background-color:#fff;
}
那个突起是什么鬼
发表于 2016-09-04 14:08:17 回复(0)
<!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)
<style>
#demo{width:100px;height:100px;}
</style>
<div id="demo">
</div>
发表于 2016-04-21 22:31:51 回复(0)