Photoshop Question posted in
The official user guide can be found here.

How to make a triangle shape in the bottom of the div – Photoshop

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.

Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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/

    Login or Signup to reply.
  3. 0

    @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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search