Question

每个旋转木马块div旁边显示的左箭头缺少尖端，不确定css中需要什么才能使其成为一个完整的三角形。

实时网址：http://bit.ly/1e5wZWQ（大图片旁边的信息轮播）

HTML

<ul id="index-controls">
                <li><div id="one" class="active indexcarouselcontrol">FREE DISC Profile</div>
                    <ul>
                        <li><h2>Training that fits like a glove</h2></li>
                        <li><p>Your company is as individual as the people it employs; and as such, it’s likely that your training requirements don’t tick any one, particular box. You may currently have a personnel issue that requires urgent attention. Or, you are taking a serious look at the management strategies you use to run your organisation and are considering an overhaul.</p></li>
                    </ul>
                </li>
                <li><div id="two" class="indexcarouselcontrol">Last Minute Availability</div>
                    <ul>
                        <li><h2>Training that fits like a glove</h2></li>
                        <li><p>Your company is as individual as the people it employs; and as such, it’s likely that your training requirements don’t tick any one, particular box. You may currently have a personnel issue that requires urgent attention. Or, you are taking a serious look at the management strategies you use to run your organisation and are considering an overhaul.</p></li>
                    </ul>
                </li>
                <li><div id="three" class="indexcarouselcontrol">Bespoke Training</div>
                    <ul>
                        <li><h2>Training that fits like a glove</h2></li>
                        <li><p>Your company is as individual as the people it employs; and as such, it’s likely that your training requirements don’t tick any one, particular box. You may currently have a personnel issue that requires urgent attention. Or, you are taking a serious look at the management strategies you use to run your organisation and are considering an overhaul.</p></li>
                    </ul>
                </li>
            </ul>

CSS

#index-controls div { display: block; background-color: #222424; font-weight: bold; margin: 0px; cursor: pointer; padding: 19px 20px 20px 20px; border-bottom: 1px solid #47839C; color: #fff; font-size: 1.1em; }
#index-controls div:before {
    content: ' ';
    position: absolute;
    top: 100%;
    left: -45px;
    position: relative;
    width: 0; 
    height: 0; 
    border-top: 19px solid transparent;
    border-bottom: 20px solid transparent; 
    border-right: 25px solid #47839C; 
}

Answer 1

：在伪元素之前给出位置：绝对和父级：在#index-controls div之前给出位置：相对并设置顶部和左侧值作为您的需要

试试这个：

#index-controls div {
  display: block;
  background-color: #222424;
  font-weight: bold;
  margin: 0px;
  position: relative;
  cursor: pointer;
  padding: 19px 20px 20px 20px;
  border-bottom: 1px solid #47839C;
  color: #fff;
  font-size: 1.1em;
}


#index-controls .active:before {
   content: ' ';
   position: absolute;
   top: 0px;
   left: -25px;
   width: 0px;
   height: 0px;
   border-top: 19px solid transparent;
   border-bottom: 20px solid transparent;
   border-right: 25px solid #47839C;
}

Answer 2

请注意，在CSS中，您使用相对位置声明覆盖绝对位置。

:before伪元素应该绝对定位于相对定位的div。

然后CSS应修改为：

media="screen"
#index-controls .active:before {
content: ' ';
position: absolute;
top: 0%;
left: -27px;
width: -0px;
height: 0px;
border-top: 27px solid transparent;
border-bottom: 27px solid transparent;
border-right: 27px solid #47839C;
}

27px是必需的，因为div高度为54px（包括填充）。

Answer 3

将font-size更改为0em。见下文：

#index-controls div {
display: block;
background-color: #222424;
font-weight: bold;
margin: 0px;
cursor: pointer;
padding: 19px 20px 20px 20px;
border-bottom: 1px solid #47839C;
color: #fff;
font-size: 0em;
}

css三角形缺少尖端

3 个答案: