Question 253144 in Html Question posted in
Some basic documentation can be found here.

Creating a Geometric Shape in HTML

I have a red triangle inside a black square, like the code below. How can I modify this code so that the background of this triangle becomes transparent?

I mean, how can I create a responsive shape of this black square minus the triangle?

here is an online demo: https://jsfiddle.net/wf42gpnu/1/

.bg-danger {
  background: transparent;
  padding: 20px;
}

.square {
  width: 100vw;
  height: 32px;
  background: black;
}

.triangle {
  width: 0;
  height: 0;
  border-left: 50vw solid transparent;
  border-right: 50vw solid transparent;
  border-bottom: 32px solid red;
  border-radius: 0;
}
<div class="square">
  <div class="triangle"></div>
</div>
Tags:

3

Answers


  1. 0

    You can use clip-path instead of a triangle child element:

    .square {
  width: 100vw;
  height: 32px;
  background: black;
  clip-path: polygon(100% 0, 100% 100%, 50% 0, 0 100%, 0% 0%);
}
    <div class="square"></div>
    Login or Signup to reply.
  2. 0 
    <style>
        .outsquare {
            width: 200px;
            height: 200px;
            background-color: black;
            position: relative;
        }
        .insquare {
            width: 100px;
            height: 100px;
            background-color: black;
            position: absolute;
            top: 50px;
            left: 50px;
        }
        .triangle {
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid white;
            position: absolute;
            top: 50px;
            left: 50px;
        }
    </style>
    
    <!DOCTYPE html>
<html lang="en">
<head>
    <title>solve problem</title>
 </head>  
<body>
    <div class="outsquare"></div>
    <div class="insquare"></div>
    <div class="triangle"></div>
</body>
</html>
    Login or Signup to reply.
  3. 0

    Just apply the styles you used for the triangle to the square, but swap the border colors. No need for the triangle:

    .square {
  width: 0;
  height: 0;
  border-left: 50vw solid black;
  border-right: 50vw solid black;
  border-bottom: 32px solid transparent; 
  border-radius: 0;
}

    <div class="square"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search