-2

enter image description here

Hi guys I'm wondering how to make this in HTML and CSS. I know the obvious way is to make a triangular shape image in the bottom but it feels wrong. Is it possible to do it in HTML and CSS?

Edit: This is a Photoshop Design Mockup and I already said I have one solution but it feels wrong just wanted to know if somebody has another possible solution.

Mark Anthony
  • 127
  • 1
  • 3
  • 11

3 Answers3

3

I'd go with clip-path to achieve something like this.

.clipped {
  clip-path: polygon(100% 0%, 100% 70%, 50% 90%, 50% 90%, 0 70%, 0 0);
}

img {
  max-width: 100%;
  width: 100%;
}
<div class="clipped">
  <img src="https://loremflickr.com/1280/720">
</div>

There's this great tool to easily generate the clip-path params: https://bennettfeely.com/clippy/

Jordi Nebot
  • 3,355
  • 3
  • 27
  • 56
  • Woo man! Thanks this is exactly what I need didn't know there are something like this. Thanks very much for your help! – Mark Anthony Dec 15 '17 at 16:36
  • Keep in mind that this CSS property is not yet official and only supported by the latest versions of Chrome, Firefox, and Opera. It's not advisable to use this on production since it won't work on Safari and Internet Explorer, – gabehou Dec 15 '17 at 17:07
1

I can't explain this at all without drawing it for you. Here is how you do it maybe someone else can fill in the blanks.

Instead of thinking about how to get a background image inside of the triangle make your background image hang lower than you need it to and put two black triangles on the top of the row bellow the image. That way it provides the illusion that your background is hanging below, when in reality you are just hiding most of it.

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  
  border-bottom: 100px solid black;
}
<div class="arrow-up"></div>
krizpers
  • 97
  • 10
  • Already saw that but you can't have background images there right? – Mark Anthony Dec 15 '17 at 16:18
  • @MarkAnthony Instead of thinking about how to get a background image inside of the triangle make your background image hang lower than you need it to and put two black triangles on the top of the row bellow the image. That way it provides the illusion that your background is hanging below, when in reality you are just hiding most of it. – krizpers Dec 15 '17 at 16:22
1

@JordiNebot answer is where I think we'd like to eventually land, but clip-path hasn't been completely included yet. If you want to make sure it runs well everywhere, I would do something along the lines of the following. Create two triangles built from the middle out-ward well beyond what you would expect to need, then place them in absolute position at the bottom middle of the div containing the image.

It's considerably more work, but it will work better across all platforms.

.main {
  position: relative;
  overflow: hidden;
width: 100%;
 }
    
.leftArrow {
   position: absolute;
   width: 0;
   right: 50%;
   height: 0;
   bottom: 4px;
   border-right: 500px solid transparent;
   border-bottom: 100px solid black;
}

.rightArrow {
   position: absolute;
   left: 50%;
   bottom: 4px;
   width: 0;
   height: 0;
   border-left: 500px solid transparent;
   border-bottom: 100px solid black;
}

img {
  max-width: 100%;
  width: 100%;
  }
 <div class="main">
      <img src="https://loremflickr.com/1280/720">
      <div class="leftArrow"></div>
      <div class="rightArrow"></div>
    </div>
tim_stuff
  • 143
  • 8