Question

您好，我在互联网上查了一下，找不到答案。如何使用透明边框在div顶部制作三角形？这看起来不太好。如果我可以移除底部边框，它会给出一个漂亮的外观作为箭头。我为此创造了一个小提琴。谢谢！

.hero_container{
    background: url('http://ekvira.in/wp-content/uploads/2013/08/blue-gradient-background-css-7110-1024x506.jpg');
    height: 300px;
}
.hero {
    position: relative;
    font-size: 18px;
    line-height: 24px;
    font-weight: lighter;   
    color: #ffffff;
    position: relative;
    border: 1px solid #ffffff;
    max-width: 820px;
    float: none;
    margin: 30px auto auto auto;
    padding-top: 30px;
    padding-bottom: 30px;
    border: 1px solid #000000;
    color:black;
    top: 50px;
}
.partners_hero_arrow_box:before {
  height: 10px;
  width: 10px;
  position: absolute;
  content: '';
  background: transparent;
  border: 1px solid #000000;
  border-top-width: 0px;
  border-left-width: 0px;
  transform: rotate(-135deg);
  top: -6px;
  left: calc(50% - 4px);
}

Answer 1

使用此标记无法执行此操作。意识到这种设计有点像hacky。您需要在气泡上设置border-top-color: transparent并创建一个包含三个单独元素的顶部边框。使它们的包装器占据整个宽度并使用flexbox例如将三角形部分与中心对齐并单独模拟顶部边框片段。

div顶部的CSS三角形，带透明底边框

1 个答案: