How to implement an pure-CSS flag-shape container? - css

My target is to implement a pure-CSS flag-shape container like this:
Requirements include:
background-color of parent container is unknown
works for different line-height and font-size settings

Option 1
Use clip-path, but check browser support for this property:
div {
clip-path: polygon(0% 0%, 100% 0%, 85% 50%, 100% 100%, 0% 100%);
background-color: #ff69b4;
/* styles for demo */
padding: 20px;
color: #fff;
}
<div>5 items</div>
Option 2
Use SVG:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<polygon points="0 0, 100 0, 85 50, 100 100, 0 100" fill="#ff69b4" />
</svg>
Option 3
Use absolutely positioned pseudoelements with gradients (to simulate triangles)
div {
background-color: #ff69b4;
margin-right: 50px;
position: relative;
/* styles for demo */
padding: 20px;
color: #fff;
}
/* pseudoelement to simulate triangles */
div:before,
div:after {
content: "";
position: absolute;
top: 0;
left: 100%;
width: 50px;
height: 50%;
background-image: linear-gradient(to left top, transparent 50%, #ff69b4 50%);
}
/* Flip triangle */
div:after {
top: 50%;
transform: scaleY(-1);
}
<div>5 items</div>

Another possible variant would be to use transformed pseudo elements.
Create 2 layers using ::before ad ::after pseudo elements.
Add background-color and place them with position: absolute having 50% height of the parent.
Apply CSS3 skew() transformations to get the flag shape.
Output Image:
Working Demo:
* {box-sizing: border-box;}
body {
background: linear-gradient(green, yellow) no-repeat;
min-height: 100vh;
padding: 10px;
margin: 0;
}
.flag {
padding: 5px 40px 5px 10px;
display: inline-block;
vertical-align: top;
position: relative;
line-height: 40px;
overflow: hidden;
}
.flag:before,
.flag:after {
transform-origin: top right;
transform: skewX(-45deg);
position: absolute;
background: pink;
content: '';
left: -45px;
height: 50%;
z-index: -1;
right: 0;
top: 0;
}
.flag:after {
transform-origin: bottom right;
transform: skewX(45deg);
top: auto;
bottom: 0;
}
<div class="flag">5 Items</div>

Related

::before and ::after elements overlapping each other ruining the background transparancy

I have a simple div element that I wanna apply a background shape to it when the user hovers over it by using the ::before and ::after pseudo elements. I rotated these elements with rotateX(). How can I style it that the elements shouldn't overlap each other (or at least not ruin the background color) but it should look like a single shape?
Tried using % but didn't work.
Please help.
Thanks so much 🙏
div{
width:200px;
padding: 18px;
margin: 10px auto;
/* border: 1px solid black; */
text-align:center;
position: relative;
perspective: 100px;
z-index: 1;
}
div:hover{
color:#fff;
}
div:hover::before, div:hover::after{
content: "";
display: block;
background-color: #00000050;
width: 100%;
height: 50px;
position: absolute;
left: 0%;
z-index: -1;
}
div::before{
top:0;
transform: rotateX(-75deg);
}
div::after{
bottom:0;
transform: rotateX(75deg);
}
<div>Hello World</div>
If you make half of each pseudo element only have the color then when you rotate them the colors don't overlap.
A minor adjustment to the padding of the div was needed to get the two rotated 'halves' to meet correctly so this would have to be looked at if you ever went for a responsive rather than a fixed px unit solution.
This snippet removes the background-color from the pseudo elements, instead using a linear-gradient background-image going just half way up (or down) the pseudo element.
div {
width: 200px;
padding: 18px;
padding: 16px;
margin: 10px auto;
/* border: 1px solid black; */
text-align: center;
position: relative;
perspective: 100px;
z-index: 1;
}
div:hover {
color: #fff;
}
div:hover::before,
div:hover::after {
content: "";
display: block;
margin: 0;
padding: 0;
width: 100%;
height: 50px;
position: absolute;
left: 0%;
z-index: -1;
}
div::before {
top: 0;
transform: rotateX(-75deg);
background-image: linear-gradient(#00000050 0 50%, transparent 50% 100%);
}
div:hover::after {
bottom: 0;
transform: rotateX(75deg);
background-color: transparent;
background-image: linear-gradient(to top, #00000050 0 50%, transparent 50% 100%);
}
<div>Hello World</div>
A Haworth's answer covers using linear gradient stops to hide the color of half of each pseudo element.
Another approach you could take is to use only one of the pseudo elements with a polygon clip path to make your shape.
.container { display: flex; }
.hoverable { position: relative; margin: auto; padding: 10px 100px; }
.hoverable:hover::before {
content: "";
position: absolute;
inset: 0;
/* top: 0; left: 0; right: 0; bottom: 0; */
background-color: rgba(0, 0, 0, 0.25);
clip-path: polygon(0 0, 100% 0, 80% 50%, 100% 100%, 0 100%, 20% 50%);
}
<div class="container">
<div class="hoverable">Hello, World!</div>
</div>

CSS clip-path breaks pseudo ::before element stack order

I'm trying to create a frosted glass effect on a non-rectangular element but it's not working out. I'm experiencing an odd issue that I can't seem to wrap my head around...
The frosted glass effect is easy to accomplish by setting a fixed background-image on the document body, adding a partially transparent background color to the element and creating a ::before pseudo element with the same fixed background-image and applying a blur filter. Like so:
body {
background: url(bg-lanterns.jpg) 0 / cover fixed;
}
main {
position: relative;
margin: 1rem auto;
padding: 1rem;
height: 600px;
width: 800px;
background: rgba(255,255,255,0.7);
}
main::before {
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(bg-lanterns.jpg) 0 / cover fixed;
filter: blur(10px);
}
Creating a non-rectangular element is also easy by using clip-path like this:
main {
position: relative;
margin: 1rem auto;
padding: 1rem;
height: 600px;
width: 800px;
background: rgba(255,255,255,0.7);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
But trying to combine these two effects breaks the stacking order and causes the ::before element to appear above the white background.
I get the same result in Chrome and Firefox so I'm wondering if this is the expected behavior and I'm simply doing something wrong... Can anybody shed some light on what is happening here?
Here's a live demo:
body {
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
}
main {
position: relative;
margin: 1rem auto;
padding: 1rem;
height: 600px;
width: 800px;
background: rgba(255,255,255,0.7);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
main::before {
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 1rem;
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
filter: blur(10px);
}
<main></main>
According to the specification for clip-path:
A computed value of other than none results in the creation of a stacking context [CSS21] the same way that CSS opacity [CSS3COLOR] does for values other than 1.
I managed to achieve the desired effect by adding the white color to an ::after pseudo element and clipping both pseudo elements instead of the element itself.
body {
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
}
main {
position: relative;
margin: 1rem auto;
height: 600px;
width: 800px;
display: flex;
flex-flow: column nowrap;
align-content: center;
align-items: center;
justify-content: center;
}
main::before,
main::after {
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
main::before {
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
filter: blur(10px);
}
main::after {
background: rgba(255,255,255,0.7);
}
<main> <span> test </span> </main>

Creating a partial box shadow on a skewed div

I'm trying to create a partial shadow on a skewed div, as close as I can get to this creative.
Right now I've been trying to do this with pseudo elements (before specifically) but I found that those elements behave strangely whenever I skew the element they are applied to. The pseudo element keeps appearing on top of my div, even though the z-index is set to -1. No matter what I do with z-index, it will stay on top of it. I want it to be behind the div it's applied to, and in front of the div below, like in the creative.
Here's my ::before code and a link to the codepen
CSS
/*! Shadows */
#test-title {
position: relative;
}
#test-title:before {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
http://codepen.io/kathryncrawford/pen/WwWEma
Skew the parent then unskew the child at the same degree.
* {
box-sizing: border-box
}
body {
padding: 40px 0
}
section {
width: 60vw;
clear: both;
overflow: hidden;
min-height: 100px;
margin: 0 auto;
position: relative;
background: #035076
}
section article {
width: 60%;
padding: 20px;
color: white;
margin: 0 auto
}
section:nth-child(even) {
transform: skew(-45deg) translate(5vw);
box-shadow: inset 0 0 2px 0 black;
}
section:nth-child(odd) {
transform: skew(45deg);
}
section:nth-child(even) article {
transform: skew(45deg) translate(5vw);
}
section:nth-child(odd) article {
transform: skew(-45deg);
}
section:before,
section:after {
content: '';
position: absolute;
}
section:nth-child(even):before {
width: 100%;
height: 0;
bottom: 100%;
left: 0;
z-index: 6;
opacity: 1;
transform: rotate(-10deg) translateY(-30px);
box-shadow: 0px 0px 64px 30px rgba(0, 0, 0, 0.8);
}
section:nth-child(odd):not(:first-child):before {
width: 100%;
height: 0;
bottom: 100%;
right: 0;
z-index: 6;
opacity: 1;
transform: rotate(10deg) translateY(-30px);
box-shadow: 0px 0px 64px 30px rgba(0, 0, 0, 0.8);
}
<section>
<article>What our clients say About Us</article>
</section>
<section>
<article>Read More!</article>
</section>
<section>
<article>Read More!</article>
</section>
<section>
<article>Read More!</article>
</section>
The easier approach would be to put the drop shadow at the top of each box after the first. This will solve all sorts of z-index issues, since each box sits 1 level higher than the box above it.. and it allows the shadow to sit inside the container instead of outside of it.
I've also changed your shadow styling to use a radial gradient* instead of a box shadow, as it is a bit easier to control in this situation, and is also closer to your design. I also did a bit of positioning to make it look a bit better too, and get the separate sides for skew1 and skew2
I've changed your last ruleset to this:
.test-info:before {
position: absolute;
content: "";
width: 100%;
left: 0;
top: 0;
height: 30px;
}
.test-info.skew1:before {
background: radial-gradient(ellipse farthest-side at 30% top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
}
.test-info.skew2:before {
background: radial-gradient(ellipse farthest-side at 70% top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
}
See Demo
* note: You may want to check/add additional browser support on the gradient that I put in before using it.
I have tried, it's not perfect, but, it is closer to desired look, imho:
<div id="test-title">
<h3>What our clients say about us</h3>
</div>
<div id="shadow1"></div>
So, i've added new html element(shadow), rather than using pseudo-elements... Now, i've set z-indexes and positions properly, to hide rotated shadow div behind first div, and added this css:
#shadow1 {
position:absolute;
width:50%;
height:150px;
background:black;
top:50px;
left:11%;
z-index:6;
opacity:1;
transform: rotate(-5deg);
box-shadow: 15px 56px 50px -12px rgba(0,0,0,0.80);
}
Demo: http://codepen.io/anon/pen/vGwNqY
You can play with rotation, box-shadow, position, height... but, this could be a good start (maybe). P.S. Similar logic could be applied to second div.
try to make box shadow for the second element using :before pseudo https://jsfiddle.net/0andpzsp/
.cont {
width: 1000px;
height: 500px;
}
div[class^="d"] {
width: 70%;
height: 50%;
position: relative;
margin-left: 40px;
margin-top: 50px;
}
.d0 {
background: linear-gradient(to right, #005f8a 0%,#00486c 50%,#003a59 100%);;
transform: skew(20deg)
}
.d1 {
background: linear-gradient(to right, #005f8a 0%,#00486c 50%,#003a59 100%);;
overflow: hidden;
top: -50px;
left: 20%;
transform: skewX(-20deg);
z-index: -1
}
.d1:before {
content: '';
border-radius: 30%;
position: absolute;
display: block;
width: 600px;
height: 70px;
z-index: 9999;
top: -100px;
left: -70px;
box-shadow: -50px 60px 90px 0px #000;
transform: rotate(-5deg)
}
<div class="cont">
<div class="d0"></div>
<div class="d1">
</div>
</div>

Angled div background with linear and radial gradient

I am currently using CSS3 to make an div with the left side angled like a trapezium using the following CSS adapted from this jsfiddle:
background:linear-gradient(75deg, transparent 75px, #35753f 76px);
I would like to combine the following CSS background with a radial one, to create the effect shown in the image below. However, when I do this, I lose the angled side. What is the best way to combine these two backgrounds?
Here is the radial background:
background:radial-gradient(circle closest-corner at right center, #337540 0%, #003832 100%);
Here is what it should look like:
Here is a jsfiddle of the below:
.container {
width: 1024px;
margin: 0 auto;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#top-banner {
position: relative;
}
#top-banner .container {
height: 350px;
}
#top-banner #banner-right {
width: 350px;
height: 350px;
background: -moz-linear-gradient(75deg, transparent 75px, #35753f 76px);
background: -o-linear-gradient(75deg, transparent 75px, #35753f 76px);
background: -webkit-linear-gradient(75deg, transparent 75px, #35753f 76px);
background: linear-gradient(75deg, transparent 75px, #35753f 76px);
position: relative;
float: right;
}
#top-banner #banner-right:after {
content: ".";
display: block;
height: inherit;
width: 5000px;
left: 350px;
top: 0;
position: absolute;
/* IE10 Consumer Preview */
background-image: -ms-radial-gradient(left center, circle closest-corner, #337540 0%, #003832 100%);
/* Mozilla Firefox */
background-image: -moz-radial-gradient(left center, circle closest-corner, #337540 0%, #003832 100%);
/* Opera */
background-image: -o-radial-gradient(left center, circle closest-corner, #337540 0%, #003832 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(radial, left center, 0, left center, 140, color-stop(0, #337540), color-stop(1, #003832));
/* Webkit (Chrome 11+) */
background-image: -webkit-radial-gradient(left center, circle closest-corner, #337540 0%, #003832 100%);
/* W3C Markup, IE10 Release Preview */
background-image: ;
z-index: -100;
}
/*#top-banner #banner-right {
width:350px;
height:350px;
background:black;
position:relative;
float: right;
}
#top-banner #banner-right:before {
content:"";
position:absolute;
top:0;
left:0;
width: 0;
height: 0;
border-bottom: 350px solid white;
border-right: 40px solid transparent;
}*/
#top-banner .slider {
float: left;
height: 350px;
width: 100px;
background-color: black;
background-size: cover;
shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
<div id="top-banner">
<div class="container clearfix">
<div id="banner-right">
</div>
<div class="slider">
<img src="http://1.bp.blogspot.com/-9aQmrN3-xpQ/TuYsXHQygrI/AAAAAAAAAtw/cEmz4PgEQdQ/s1600/r-NEW-SPECIES-MEKONG-DELTA-huge.jpg" height="350" alt="banner-1" />
</div>
</div>
</div>
Angled div - 2 methods
The angle is created with transform: rotate and not the linear-gradient.
#1 - Rotated :before with translate 3d
In this example, translate3d(0px,0px,1px) is used to eliminate the jagged edge of the rotated element. More information here. I was reminded about this technique from this answer dealing with a similar rendering problem.
As this is a hack that should be used sparingly, their is an alternative way to mask this edge without it in the second example.
Rotate a pseudo element, :before, of the div. This will create our angled edge
The :before gets an appropriate percentage height, width: 100px and is positioned appropriately
The parent div is given overflow: hidden to cut off the background cleanly
Create a second pseudo element, :after, to extend the background to the edge of the viewport.
The gradient background is applied to :after
The :before pseudo element is given a solid background the same color as the edge of the gradient to blend
The :before and :after pseudo elements are given z-index: 1
Elements that will sit above the "background" will need position: relative and z-index: 2 to push them above it. (Like the paragraph in the example below)
Example
The linear-gradient on the body demonstrates that the div can be placed over any background.
body {
background: linear-gradient(#000 0%, #FFF 100%) no-repeat;
margin: 0;
}
div {
position: relative;
height: 350px;
overflow: hidden;
padding-left: 100px;
min-width: 500px;
}
div:before {
content: '';
display: block;
position: absolute;
height: 120%;
width: 90px;
top: -10%;
left: 90px;
background: #003832;
transform: translate3d(0px,0px,1px) rotate(-15deg);
z-index: 1;
}
div:after {
content: '';
display: block;
position: absolute;
height: 120%;
width: 100%;
top: -10%;
left: 135px;
background: radial-gradient(circle closest-corner at 50% 50%, #33753E 0%, #003832 80%);
z-index: 1;
}
p {
color: #FFF;
left: 10px;
position: relative;
z-index: 2;
}
<div>
<p>This is some text</p>
</div>
#2 - Rotated :before and :after without translate 3d
Rotate a pseudo element, :before, of the div
Apply the background to the pseudo element
The pseudo element gets height: 200% and width: 200% and is positioned appropriately
The parent div is given overflow: hidden to cut off the gradient cleanly and the rotated pseudo element becomes the background
A second pseudo element, :after, is used to help mask the jagged edge with a box-shadow (the left edge is jagged at all rotations that are not 45deg increments)
The :before and :after pseudo elements are given z-index: 1
Elements that will sit above the "background" will need position: relative and z-index: 2 to push them above it. (Like the paragraph in the example below)
Example 1
body {
background: linear-gradient(#000 0%, #FFF 100%) no-repeat;
}
div {
position: relative;
width: 500px;
height: 350px;
overflow: hidden;
padding-left: 100px;
}
div:before,
div:after {
content: '';
display: block;
position: absolute;
height: 200%;
width: 200%;
top: -220px;
left: 90px;
background: radial-gradient(circle closest-corner at 20% 50%, #33753E 0%, #003832 100%);
transform: rotate(-15deg);
z-index: 1;
}
div:after {
top: -220px;
left: 92px;
box-shadow: 0 0 2px 2px #003832;
}
p {
color: #FFF;
z-index: 2;
position: relative;
}
<div>
<p>This is some text</p>
</div>
Example 2 - extended
body {
background: linear-gradient(#000 0%, #FFF 100%) no-repeat;
margin: 0;
}
div {
position: relative;
height: 350px;
overflow: hidden;
padding-left: 100px;
max-width: 1600px;
}
div:before,
div:after {
content: '';
display: block;
position: absolute;
height: 300%;
width: 300%;
top: -200%;
left: 90px;
background: radial-gradient(circle closest-corner at 20% 50%, #33753E 0%, #003832 100%);
transform: rotate(-15deg);
z-index: 1;
}
div:after {
left: 92px;
box-shadow: 0 0 2px 2px #003832;
}
p {
color: #FFF;
z-index: 2;
position: relative;
left: 80px;
}
<div>
<p>This is some text</p>
</div>
If you want it to be exactly as you shown on a picture - try :before pseudoclass.
#div_with_background{
position: relative;
background: radial-gradient(circle closest-corner at 60% 50%, #33753E 0%, #003832 100%);
width: 567px;
height: 356px;
}
#div_with_background:before{
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 0;
height: 0;
border-style: solid;
border-width: 356px 0 0px 130px;
border-color: transparent transparent transparent #FFFFFF;
z-index: 1;
}
<div id="div_with_background"></div>

Responsive CSS triangle with percents width

The code below will create an arrow right below an <a> element:
JSFiddle
.btn {
position: relative;
display: inline-block;
width: 100px;
height: 50px;
text-align: center;
color: white;
background: gray;
line-height: 50px;
text-decoration: none;
}
.btn:after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-width: 10px 50px 0 50px;
border-style: solid;
border-color: gray transparent transparent transparent;
}
Hello!
The problem is that we have to indicate the link width to get an arrow of a proper size because we cannot indicate the border width in pixels.
How to make a responsive triangle percent based?
You could use a skewed and rotated pseudo element to create a responsive triangle under the link :
DEMO (resize the result window to see how it reacts)
The triangle maintains it's aspect ratio with the padding-bottom property.
If you want the shape to adapt it's size according to it's content, you can remove the width on the .btn class
.btn {
position: relative;
display: inline-block;
height: 50px; width: 50%;
text-align: center;
color: white;
background: gray;
line-height: 50px;
text-decoration: none;
padding-bottom: 15%;
background-clip: content-box;
overflow: hidden;
}
.btn:after {
content: "";
position: absolute;
top:50px; left: 0;
background-color: inherit;
padding-bottom: 50%;
width: 57.7%;
z-index: -1;
transform-origin: 0 0;
transform: rotate(-30deg) skewX(30deg);
}
/** FOR THE DEMO **/
body {
background: url('http://i.imgur.com/qi5FGET.jpg');
background-size: cover;
}
Hello!
For more info on responsive triangles and how to make them, you can have a look at
Triangles with transform rotate (simple and fancy responsive triangles)
Another solution to this would be to use a CSS clip-path to clip a triangle out of a coloured block. No IE support however, but could be used for internal tools etc.
DEMO
Written with SCSS for ease.
.outer {
background: orange;
width: 25%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 1em;
p {
margin: 0;
text-align: center;
color: #fff;
}
&:after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
padding-bottom: 10%;
background: orange;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}
}
I found solution that works with any width/height. You can use two pseudo-elements with linear-gradient background, like this, (fiddle):
.btn {
position: relative;
display: inline-block;
width: 100px;
height: 50px;
text-align: center;
color: white;
background: gray;
line-height: 50px;
text-decoration: none;
}
.btn:before {
content: "";
position: absolute;
top: 100%;
right: 0;
width: 50%;
height: 10px;
background: linear-gradient(to right bottom, gray 50%, transparent 50%)
}
.btn:after {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 50%;
height: 10px;
background: linear-gradient(to left bottom, gray 50%, transparent 50%)
}
A modified version of the below code can help you to achieve this
HTML
<div class="triangle-down"></div>
CSS
.triangle-down {
width: 10%;
height: 0;
padding-left:10%;
padding-top: 10%;
overflow: hidden;
}
.triangle-down:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left:-500px;
margin-top:-500px;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-top: 500px solid #4679BD;
}
For further reading on responsive triangles: CSS triangles made responsive
(archived link)
I tried the other answers and found them to be either too complex and/or unwieldy to manipulate the shape of the triangle. I decided instead to create a simple triangle shape as an svg.
The triangle height can be set to an absolute value, or as a percentage of the rectangle so it can be responsive in both directions if necessary.
html, body{
height:100%;
width:100%;
}
.outer{
width:20%;
height:25%;
background:red;
position:relative;
}
.inner{
height:100%;
width:100%;
background-color:red;
}
.triangle-down{
height:25%;
width:100%;
position:relative;
}
.triangle-down svg{
height:100%;
width:100%;
position:absolute;
top:0;
}
svg .triangle-path{
fill:red;
}
<div class="outer">
<div class="inner"></div>
<div class="triangle-down">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 2 1">
<g>
<path class="triangle-path" d="M0,0 l2,0 l-1,1 z" />
</g>
</svg>
</div>
Tested FF, Chrome, IE, Edge, mob Safari and mob Chrome
Another option would be to use background liner gradients, and flex positioning to make sure that the triangle always scales to its parent container. No matter how wide or narrow you make that container, the triangle always scales with it. Here is the fiddle:
https://jsfiddle.net/29k4ngzr/
<div class="triangle-wrapper-100">
<div class="triangle-left"></div>
<div class="triangle-right"></div>
</div>
.triangle-wrapper-100 {
width: 100%;
height: 100px;
display:flex;
flex-direction: column;
flex-wrap: wrap;
}
.triangle-right {
right: 0px;
background: linear-gradient(to right bottom, #6940B5 50%, transparent 50%);
width: 50%;
height: 100px;
}
.triangle-left {
left: 0px;
background: linear-gradient(to right bottom, #6940B5 50%, transparent 50%);
width: 50%;
height: 100px;
transform: scaleX(-1);
}
I took #Probocop's answer and come up with the following:
<style>
.btn {
background-color: orange;
color: white;
margin-bottom: 50px;
padding: 15px;
position: relative;
text-align: center;
text-decoration: none;
}
.btn:after {
background-color: inherit;
clip-path: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3CclipPath id="p" clipPathUnits="objectBoundingBox"%3E%3Cpolygon points="0 0, 1 0, 0.5 1" /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E#p'); /* fix for firefox (tested in version 52) */
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
content: '';
height: 50px;
left: 0;
position: absolute;
right: 0;
top: 100%;
}
</style>
Hello!
This works in Chrome and I've added a fix for Firefox. It doesn't work in Edge, however if you decrease the height of the down arrow then it doesn't look so bad.
Please note that if you are using bootstrap you will need to either change the name or override some of the styles it applies. If you decide to rename it then you also need to add the following to the .btn style:
box-sizing: content-box;

Resources