Responsive triangle with border to container height and width
Problem
I need to create a container box that contains a triangle outline that matches the size of the container, here's an example image that is much simpler:
Requirements
- The triangle should resize in height and width of the container, it doesn't need to maintain its aspect ratio, which means that the base and points of the triangle must touch the sides of the container, as in the attached image.
- The triangle should have a clear and not blurry 1px border
- The triangle must have a background
#fff
- The field must have a border of 2px
- The field must have a background
#fff
Problems
I've tried something basic with borders around the child div, but dynamically positioning it with relative width and height is a problem.
As soon as the outline of a triangle is obtained, and not a completely colored triangle. Does this mean that creating a triangle using a border becomes more difficult if someone can't figure out how to position one on top of the other to give a white background with a 1px border effect like in the image?
Example
.pane{
border:1px solid #000;
height:500px;
margin:auto;
margin-top:150px;
position:relative;
width:400px;
}
.triangle{
width: 0;
height: 0;
border-top: 250px solid transparent;
border-bottom: 250px solid transparent;
border-left: 250px solid #ff0000;
}
<div class="pane">
<div class="triangle">
</div>
</div>
Example 2
This example creates flexible triangles, but will need to be flipped and have wider sections located at absolutely left:0; right:0; top:0;
source to share
Depending on the units you are using for your container, and if the size depends on the viewport, you can achieve this behavior with vw/vh
units :
div{width:0;outline:1px solid red;}
.r{
border-top:15vh solid transparent;
border-bottom:15vh solid transparent;
border-left:50vw solid teal;
}
.t{
border-left:15vw solid transparent;
border-right:15vw solid transparent;
border-bottom: 50vh solid gold;
}
<div class="r"></div>
<div class="t"></div>
If you only want the outline of the triangle, and if you have a simple background, you can use this approach:
The goal is to position another triangle with the same color as the background above the first:
div {
position: relative;
overflow: hidden;
outline: 1px solid red;
}
.r {
width: 50vw;
height: 30vh;
border-left: 2px solid teal;
}
.t {
height: 50vh;
width: 30vw;
border-bottom: 2px solid gold;
}
.r:after,
.r:before,
.t:after,
.t:before {
content: '';
position: absolute;
top: 0;
left: 0;
}
.r:before,
.r:after {
border-top: 15vh solid transparent;
border-bottom: 15vh solid transparent;
border-left: 50vw solid teal;
}
.r:after {
border-left-color: #fff;
left: -1vw;
}
.t:before,
.t:after {
border-left: 15vw solid transparent;
border-right: 15vw solid transparent;
border-bottom: 50vh solid gold;
}
.t:after {
border-bottom-color: #fff;
bottom: -1vh;
}
<div class="r"></div>
<div class="t"></div>
source to share
-
it uses a great technique using gradients to create the shape.
-
you might want to play with it and see:
body, html {height: 100%}
#triangleWrapper {
width: 100px;
height:200px;
border:1px solid black;
}
.segmentTriangle {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
background: linear-gradient(to right bottom, black 50%, transparent 50%)
}
<div style="float: left;" id="triangleWrapper">
<div style="height: 100%;" class="segmentTriangle"></div>
</div>
</div>
Outline only
Using the power of gradients, you can create clean paths, for example:
body,
html {
height: 100%;
}
#triangleWrapper {
width: 500px;
height: 200px;
border: 2px solid black;
overflow: hidden;
}
.segmentTriangle {
width: 200%;
height: 100%;
margin-left: -100%;
background: linear-gradient(to left top, transparent 49%, black 50%, transparent 50%), linear-gradient(to left bottom, transparent 49%, black 50%, transparent 50%);
}
<div id="triangleWrapper">
<div class="segmentTriangle"></div>
</div>
Update
Note
to ensure that the "border" is not clipped, you can set overflow:hidden;
in the parent container
source to share
This article seems to have a nice solution for flexible triangles with pure CSS
.triangle-up {
width: 25%;
height: 0;
padding-left: 25%;
padding-bottom: 25%;
overflow: hidden;
border: 1px solid brown;
margin: 20px;
}
.triangle-up div {
width: 0;
height: 0;
margin-left: -500px;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-bottom: 500px solid #4679BD;
}
.triangle-right {
width: 0;
height: 0;
padding-top: 25%;
padding-bottom: 25%;
padding-left: 25%;
overflow: hidden;
border: 1px solid green;
margin: 20px;
}
.triangle-right div {
width: 0;
height: 0;
margin-top: -500px;
margin-left: -500px;
border-top: 500px solid transparent;
border-bottom: 500px solid transparent;
border-left: 500px solid tomato;
}
<div class="triangle-up">
<div></div>
</div>
<div class="triangle-right">
<div></div>
</div>
source to share
If you can use SVG, this solution might work for you.
You can use SVG to create an arrow that changes to match its parent. You can see the working arrow (different arrow that you are using) at http://css-tricks.com/ . When you scroll down to link to article 2, you will see an arrow. If you change the arrow parent anchor label width and height and set its block property to block. You will see that the arrow changes depending on its parent. You can use the Inspect panel in any browser to view the result.
source to share