Question

由于我发现的所有问题都与＃34;评论框箭头有关;＆＃34;;

我想制作一个看起来像这样的DIV

我需要将两个三角形附加到div容器，但我不确定如何执行此操作。目前我的代码如下所示：http://codepen.io/anon/pen/yJEyOm

.expand {
  width: 200px;
}

.expand:after {
  content: " ";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 5px 5px 0;
  border-color: transparent #007bff transparent transparent;
}

.expand:before {
  content: " ";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 5px 5px 0;
  border-color: transparent #007bff transparent transparent;
}

这里的问题是三角形不是全部显示，只是它的一部分。怎么解决？

Answer 1

像这样：http://codepen.io/anon/pen/OXEPmB？问题是伪元素的位置。

.expand {
  width: 100px;
  background-color: #007bff;
  position: relative;
  padding-left: 10px;
}

.expand:after {
  content: " ";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0px 0px 10px 10px;
  border-color: #fff #fff #fff #007bff;
  position: absolute;
  right: 0;
  bottom: 0;
}

.expand:before {
  content: " ";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 0;
  border-color: #fff #007bff #fff #fff;
  position: absolute;
  left: 0;
  bottom: 0;
}

Answer 2

试试这个

div{
  width:100%;
  position:relative;
  background:red;
  height:20px;
}
div:before{
  content: '';
  display: block;
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform:translate(-50%,0);
  border-top: 23px solid red;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  height: 0;
  width: 50%;
}
span{
  display:block;
  position:absolute;
  left:50%;
  transform:translate(-50%,0);
  bottom:-20px;
  font-size:20px;
}

<div>
  <span>Expand</span>  
</div>

Answer 3

试试这段代码。

.container{
   width: auto;
  background-color: #007bff;
  height:20px;
}

.expand {
  position:absolute;
  width: 85px; 
  height: 0px; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #007bff;
  margin-top:18px;
  margin-left:25px;
 
}

.expand p{
  margin-top:-20px;
  padding-left:12px
  
}

<div class="container">

  <div>
    <div class="expand"><p>expand</p></div>

Answer 4

这允许您添加和自定义您想要的任何内容。只需添加img并自定义空格即可。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
		<title>Insert title here</title>
		<style>
			a { text-decoration:none; }
			ul, ul li { margin:0; padding:0; }
			ul li { display:inline-block; }
			ul li a { background: url('navrepeater.png') repeat-x #efefef; line-height: 20px; display:inline-block; }
			ul li a:before, ul li a:after { 
				content: "";
				width: 30px;
				height: 30px;
				display: inline-block;
				vertical-align: middle;
			}
			ul li a:before { background: url('left.png') no-repeat #ccc; }
			ul li a:after { background: url('right.png') no-repeat #ccc; }
		</style>
	</head>
	<body>

		<ul>
			<li><a href="#">aaa</a></li>
			<li><a href="#">aaa</a></li>
			<li><a href="#">aaa</a></li>
		</ul>

	</body>
</html>

将三角形附加到div

4 个答案: