0

Hi I checked all over the internet and couldn't find an answer for this. How can i make the triangle on the top of div with transparent border? This doesn't look that good. If i can remove the bottom border, it will give a nice look as an arrow. I've created a fiddle for this. Thanks!

Check this fiddle

.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);
}
prdtuty
  • 532
  • 3
  • 9
  • 21

1 Answers1

0

With this markup it is not possible to do so. Realising this design is kind of hacky. You need to set border-top-color: transparent on your bubble and create a top border with three individual elements. Make their wrapper take up full width and use flexbox for example to align the triangle part to the center and model the top-border fragments individually.

Jan Wirth
  • 411
  • 2
  • 13