我尝试将箭头形状添加到div中。我设法将它添加到div的末尾,但我正在努力弄清楚如何在不使用新类的情况下将其添加到前面。是否有可能只用一个类来实现它?
编辑:我用不同的形状方法回答问题, 我认为它们都非常有用:
public interface IPersonViewModel
{
[Required]
string MobileNumber { get; set; }
}
public class PersonViewModel : IPersonViewModel
{
// this will NOT get the [Required] attribute from the interface
public string MobileNumber { get; set; }
}

.arrow {
margin-left: 100px;
position: relative;
background: pink;
width: 400px;
height: 100px;
text-align:center;
line-height:100px;
margin-bottom:10px;
}
.arrow:after {
border: solid transparent;
content: " ";
position: absolute;
border-bottom-color: white;
border-width: 50px;
left: 0;
top: 0;
transform: rotate(90deg);
}
.arrow:before {
border: solid transparent;
content: " ";
position: absolute;
border-bottom-color: pink;
border-width: 50px;
left: 400px;
top: 0;
transform: rotate(90deg);
}

答案 0 :(得分:2)
你需要一个内在元素。这个元素是什么,纯粹取决于你。在这里,我使用了<span>
来显示左箭头。
.arrow {
float: left;
width: 128px;
height: 50px;
background-color: white;
border: 1px solid green;
position: relative;
margin-right: 40px;
text-align: center;
border-left: none;
}
.arrow:after,.arrow span:after {
content: '';
position: absolute;
top: 0px;
left: 128px;
width: 0;
height: 0;
border: 25px solid transparent;
border-left: 12px solid white;
z-index: 2;
}
.arrow:before,.arrow span:before {
content: '';
position: absolute;
top: 0px;
left: 129px;
width: 0;
height: 0;
border: 25px solid transparent;
border-left: 12px solid green;
z-index: 1;
}
.arrow span:after {
left: 0;
}
.arrow span:before {
left: 1px;
}
<div class="arrow"><span></span>1</div>
<div class="arrow"><span></span>2</div>
<div class="arrow"><span></span>3</div>
<div class="arrow"><span></span>4</div>
<div class="arrow"><span></span>5</div>
答案 1 :(得分:1)
我修改过V形状,在这个页面上:https://css-tricks.com/examples/ShapesOfCSS/(借用了想法,归功于Anthony Ticknor先生:))
.chevron {
position: relative;
text-align: center;
height: 60px;
width: 260px;
line-height:60px;
margin-bottom:10px;
}
.chevron:before {
content: '';
position: absolute;
top: 0;
left: 3%;
height: 50%;
width: 100%;
transform: skew(25deg, 0deg);
border:1px solid red;
border-bottom:none;
}
.chevron:after {
content: '';
position: absolute;
top: 50%;
left: 3%;
height: 50%;
width: 100%;
transform: skew(-25deg, 0deg);
border:1px solid red;
border-top:none;
}
<div class="chevron">1</div>
<div class="chevron">2</div>
所以,一个div和两个伪元素,在需要的地方隐藏了边框。