CODEWITHSUNDEEP
htmlcss
Gavin
Gavin

Reputation: 991

Creating a div with a pointed side

I want to create a div with an image and text in it that looks like this.

enter image description here

I've managed to get something that looks like this here:

JSFiddle of pointed div

  .triangle-down {
    background: white;
    display: inline-block;
    height: 125px;
    margin-left: 20px;
    margin-bottom: 55px;
    position: relative;
    width: 200px;
    cursor: pointer;
    border: red solid 2px;
  }
  img {
    margin: 10px;
  }
  .triangle-down:before {
    border-top: 20px solid red;
    border-left: 101px solid transparent;
    border-right: 101px solid transparent;
    content: "";
    height: 0;
    left: -1px;
    position: absolute;
    top: 127px;
    width: 0;
  }
  .triangle-down:after {
    border-top: 20px solid white;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    content: "";
    height: 0;
    left: 0;
    position: absolute;
    top: 125px;
    width: 0;
  }
<div class="triangle-down">
  <img src="http://placehold.it/180x105">
</div>

The issues I have are:

(1) The curser turns to a pointer outside the shape when it crosses the transparent borders that help create the point. I'd prefer it if the pointer appeared only when inside the visible outline of the shape.

(2) Is there a better way of doing this? I looked at trying to rotate a div to create the point as I thought this would solve the pointer issue but I can't work out how to create an isosceles triangle shape with the correct proportions this way. This would also allow me to apply a border to create the outline rather than overlay two triangles as I have in the JSFiddle. See this post for more on this - Speech bubble with arrow

Upvotes: 0

Views: 1397

Answers (1)

Asons
Asons

Reputation: 87231

Here is a version using transform: rotate

/*Down pointing*/
.triangle-down {
  background: white;
  display: inline-block;
  height: 125px;
  margin-left: 20px;
  margin-bottom: 55px;
  position: relative;
  width: 200px;
  cursor: pointer;
  border: red solid 2px;
}
img {
  position: relative;
  margin: 10px;
  z-index: 1
}
.triangle-down:before,
.triangle-down:after {
  border-bottom: 2px solid red;
  background: white;
  content: '';
  height: 50px;
  left: 5px;
  position: absolute;
  top: 98px;
  width: 54%;
  transform: rotate(22deg);
  z-index: 0;
}
.triangle-down:after {
  left: auto;
  right: 5px;
  transform: rotate(-22deg);
}
<div class="triangle-down">
  <img src="http://placehold.it/180x105">
</div>

Upvotes: 1

Related Questions