I am doing website for my friend and now I don't know how to draw something in css.
I want this
I know how to draw this in "AKTUELNO", but I don't know how to create that bottom border that have longer width and skewed sides. Sorry if I didn't explain you very well, but you will understand when you see photo.
I hope you will help me :)
My workaround suggestion using gradients:
html {
height: 100%;
background-image: linear-gradient(pink, white);
}
*, *::before, *::after {
box-sizing: border-box;
}
div {
height: 150px;
width: 300px;
margin-left: 50px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
div::before, div::after {
content: '';
display: block;
height: 149px;
width: 50px;
}
div::before {
float: left;
margin-left: -50px;
background-image: linear-gradient(-71.5deg, transparent, transparent 47px, black 47px, black 48px, transparent 48px),
linear-gradient(to top, black, black 1px, transparent 1px);
}
div::after {
float: right;
margin-right: -50px;
background-image: linear-gradient(71.5deg, transparent, transparent 47px, black 47px, black 48px, transparent 48px),
linear-gradient(to top, black, black 1px, transparent 1px);;
}
<div></div>
And here is my try to adopt the solution that was mentioned by #Harry:
body {
background: lightblue;
}
.container {
position: relative;
width: 75%;
margin: 0 auto;
background: rgba(100,100,100,.15);
height: 300px;
text-align: center;
line-height: 300px;
font-size: 3em;
}
.container::after {
position: absolute;
display: block;
content: '';
width: 100%;
height: 95%;
top: -2.5%;
padding: 0 50px;
margin-left: -50px;
border: 1px solid black;
-webkit-transform: perspective(50px) rotateX(2deg);
-moz-transform: perspective(50px) rotateX(2deg);
transform: perspective(50px) rotateX(2deg);
}
<div class='container'>
Content Goes Here
</div>
But I think that the robust solution can be achieved by using SVG.
Related
How do I make half a hexagon shape with a border and over top a rectangle shape with a border and an image inside the half hexagon shape using CSS and HTML5
I have no code for this as I have tried but cannot figure out how to do it
I added an image of what I would like to be able to do.
You can create a trapezoid fairly easily with a rectangle and 2 CSS triangles made with some transparent borders using :before and :after.
Working Example:
body {
background: black;
}
.rectangle {
background: #ECECEC;
height: 20px;
}
.trapezoid {
width: 50px;
height: 50px;
position: relative;
margin: 0 auto;
background: #ECECEC;
}
.trapezoid:before,
.trapezoid:after {
content: '';
display: block;
position: absolute;
top: 0;
border: 25px solid transparent;
border-top-color: #ECECEC;
}
.trapezoid:before {
right: 100%;
border-right-color: #ECECEC;
}
.trapezoid:after {
left: 100%;
border-left-color: #ECECEC;
}
<div class="rectangle">
<div class="trapezoid"></div>
</div>
updated with shape and border-colors
div {
margin-top:1em;;
text-align: center;
padding: 0.5em;
border-top:1px solid lightgray;
background: linear-gradient(to bottom, #ECECEC 50%, lightgray 50%, lightgray 51%, transparent 52%);
}
img {
position: relative;
display: block;
margin: 10px auto;
z-index: 1;
}
span {
text-align: center;
display: inline-block;
width:320px;
position: relative;
overflow: hidden;
border-top:1px solid lightgray;
background: linear-gradient(to left, lightgray, lightgray) bottom center, linear-gradient(40deg, transparent 50px, lightgray, 50px, lightgray 52px, #ECECEC 52px)bottom left, linear-gradient(-40deg, transparent 50px, lightgray, 50px, lightgray 52px, #ECECEC 52px)bottom right;
background-repeat: no-repeat;
background-size: 50% 2px, 50% 100%, 50% 100%;
}
<div>
<span>
<img src="http://lorempixel.com/55/46/technics/1" alt="ico"/>
</span>
</div>
older codes
a single pseudo and overflow:hidden, can do it too:
div {
text-align: center;
padding: 0.5em;
background: linear-gradient(to bottom, gray 50%, black 50%);
}
img {
position: relative;
display: block;
padding: 0.5em 0;
z-index: 1;
}
span {
text-align: center;
display: inline-block;
padding: 0 3em;
position: relative;
overflow: hidden;
}
span:before {
position: absolute;
content: '';
bottom: 0;
left: 50%;
margin-left: -75px;
height: 150px;
width: 150px;
background: gray;
transform: rotate(45deg);
}
<div>
<span>
<img src="http://lorempixel.com/40/50/nature/3" alt="ico"/>
</span>
</div>
or a gradient (easier probably to draw borders or shadows if needed)
div {
text-align: center;
padding: 0.5em;
background: linear-gradient(to bottom, gray 50%, black 50%);
}
img {
position: relative;
display: block;
padding: 0.5em 0;
z-index: 1;
}
span {
text-align: center;
display: inline-block;
padding: 0 3em;
position: relative;
overflow: hidden;
background: linear-gradient(40deg, transparent 1.5em, gray 1.5em)bottom left, linear-gradient(-40deg, transparent 1.5em, gray 1.5em)bottom right;
background-repeat: no-repeat;
background-size: 50% 100%;
}
<div>
<span>
<img src="http://lorempixel.com/40/50/nature/3" alt="ico"/>
</span>
</div>
Here is a solution using pseudo elements with skew. The image can be overlayed without problems
.rect {
width: 100%;
height: 20px;
background-color: lightgrey;
border-bottom: 1px solid grey;
position: relative;
}
.hex {
width: 200px;
height: 40px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.hex:before, .hex:after {
content: "";
position: absolute;
width: 200px;
height: 40px;
border-style: solid;
border-color: grey;
border-width: 0px 0px 1px 0px;
transform-origin: bottom center;
background-color: lightgrey;
}
.hex:before {
transform: skew(10deg);
border-left-width: 1px;
}
.hex:after {
transform: skew(-10deg);
border-right-width: 1px;
}
<div class="rect">
<div class="hex"></div>
</div>
You can create half octagon using :after.
.halfOctagon {
width: 100px;
height: 50px;
background: #f35916;
position: relative;
top:25px;
left:50px;
}
.halfOctagon:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid #f35916;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}
you can try live example in https://jsfiddle.net/kb2tzxq4/
To move the half octagon adjust top and left in css for .halfOctagon
How does one eliminate this effect so that it's just a clean box-shadow glow?
https://jsfiddle.net/stu9qjLp/2/
Code:
#test {
border: 1px solid red;
border-radius: 1px;
width: 1px;
height: 1px;
box-shadow: 0 0 250px 125px red;
}
A radial gradient perhaps?
body {
margin: 0;
height: 100vh;
background: #000;
}
body::before {
content: '';
position: absolute;
height: 100%;
width: 100%;
background-image: radial-gradient(ellipse at center top, red, black 50%, black);
}
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;
I am trying to achieve this:
I couldn't find anything like it, but here is my failed attempt:
#one {
width: 200px;
height: 100px;
background-color: white;
box-shadow: 0px 0px 20px #2D8DBD;
left: 50px;
display: inline-block;
margin-right: -100px;
}
#two {
width: 200px;
height: 100px;
background-color: white;
box-shadow: 0px 0px 20px #B22D2D;
left: -50px;
display: inline-block;
margin-left: -50px;
z-index: -1;
}
<center>
</br>
</br>
<div id="one"></div>
<div id="two"></div>
</center>
jsFiddle demo.
I am using bootstrap, so I don't think just making another "gradient" image would be simpler.
Also, I have tried compromising for this: http://designposts.net/fresh-free-css3-and-html5-tutorials/ but my image is circled, and so it turns out as a cut square.
You can fake one, using background gradient and a box-shadow, as well as a css pseudo element to mask the border. Note that if you change the background color of the surrounding content you have to change every instance of #444
.outer {
box-sizing: border-box;
padding: 25px;
height: 200px;
width: 200px;
box-shadow: 0px 0px 10px 10px #444 inset;
border-radius: 50%;
background: linear-gradient(to bottom right, rgb(250,50,50), rgb(50,150,250));
}
.outer::before {
content: "";
display: block;
position: relative;
left: -26px;
top: -26px;
height: 202px;
width: 202px;
border-radius: 50%;
border: 3px solid #444;
box-sizing: border-box;
}
.inner {
position:relative;
top: -204px;
left: -3px;
border-radius: 50%;
background: linear-gradient(to bottom right, #ee2135, #6279ff);
padding: 2px;
height: 150px;
width: 150px;
box-shadow: 0px 0px 30px -5px black;
}
.content {
height: 100%;
width: 100%;
background: #444;
border-radius: 50%;
}
/* Styling only past here */
html, body {
text-align: center;
padding: 0px;
margin: 0px;
height: 100%;
background: #444;
}
body::before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.outer {
display: inline-block;
vertical-align: middle;
}
<div class="outer">
<div class="inner">
<div class="content">
</div>
</div>
</div>
As I understand your request, you need a border on the element that is filled with a gradient effect.
That could be get with a border-image, but then the border-radius wouldn't work.
If your inner background is black solid, that can be achieved setting different backgrounds, and playing with the zone affected by each one (with background-clip and background-origin)
In the snippet, 2 examples, one with radial gradients and the other with linear gradients
The best about that solution is that the border is still a border. You can set the width, the radius, and so on, the usual way
.test {
width: 250px;
height: 200px;
display: inline-block;
margin: 5px;
border-radius: 20px;
border: solid 10px transparent;
}
#test1 {
background: linear-gradient(black, black),
radial-gradient(circle at left top, red 30px, transparent 150px),
radial-gradient(circle at right top, blue 30px, transparent 150px),
cyan;
background-clip: content-box, border-box, border-box, border-box;
background-origin: content-box, border-box, border-box, border-box;
}
#test2 {
background: linear-gradient(black, black),
linear-gradient(to bottom right, red 30px, transparent 150px),
linear-gradient(to bottom left, blue 30px, transparent 150px),
cyan;
background-clip: content-box, border-box, border-box, border-box;
background-origin: content-box, border-box, border-box, border-box;
}
<div class="test" id="test1"></div>
<div class="test" id="test2"></div>
You may be able to do this with a single element, in conjunction to a pseudo element to act as the border. This may have a higher browser compatibility than border-image.
mock up demo
html,
body {
margin: 0;
padding: 0;
}
html {
background: #222;
}
div {
height: 200px;
width: 200px;
background: gray;
position: relative;
border-radius: 10px;
margin: 20px auto;
}
div:before {
content: "";
position: absolute;
top: -5%;
left: -5%;
border-radius: inherit;
height: 110%;
width: 110%;
z-index: -1;
background: linear-gradient(to bottom right, rgba(250, 50, 50, 0.5), rgba(50, 150, 250, 0.5)), linear-gradient(to bottom left, blue 30px, transparent 150px);
box-shadow: inset 0 0 10px 5px #222;
}
<div></div>
This is done with just CSS Grid, no JavaScript. Check it out and see if this is what you are looking for
https://codepen.io/dszlauer/pen/RLjwZq?editors=1100#
<html>
<body>
<div class="grid">
<div class="blurBox"></div>
<div class="inputBox">
<div class="fName">f</div>
<div class="lName">l</div>
</div>
</div>
</body>
</html>
body {
background-color: black;
color: white;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: auto;
grid-gap: 20px;
//border: 1px solid white;
}
.blurBox {
grid-row: 1 / 1;
grid-column: 1 / 1;
background: linear-gradient(-45deg, red, blue);
filter: blur(5px);
border-radius: 5px;
}
.inputBox {
grid-row: 1 / 1;
grid-column: 1 / 1;
margin: 7px;
background: black;
border: 1px solid white;
border-radius: 5px;
z-index: 1;
}
.fName {
margin: 20px;
border: 1px solid white;
}
.lName {
margin: 20px;
border: 1px solid white;
}
Just realized I have yet to see this.
But can not believe it isn't possible.
I'm looking to draw a triangle in pure CSS/HTML. An equilateral if possible.
Clarification:
I don't wish to use an image to achieve this.
You would need to be able to put content inside the div.
One Solution
Diagonals are not easy. One solution is to overlay pseudo-elements to create the border, assuming you are dealing with solid background colors. Then you have to position the content to make it look nice. You could even do some text wrapping.
Here is a basic example using this code:
CSS & HTML Respectively
.triangleBorder {
position: relative;
width: 200px;
height: 173.2px; /* for equalateral = Width * (sq.root 3) / 2 */
}
.triangleBorder:before {
content: '';
width: 0;
height: 0;
position: absolute;
z-index: -2;
border: 100px solid transparent;
border-top-width: 0;
border-bottom: 173.2px solid black;
}
.triangleBorder:after {
content: '';
width: 0;
height: 0;
position: absolute;
left: 1px;
top: 1px;
z-index: -1;
border: 99px solid transparent;
border-top-width: 0;
border-bottom: 171.5px solid white;
}
.triangleBorder span {
position: absolute;
width: 100%;
text-align: center;
top: 50%;
}
<div class="triangleBorder">
<span>Content<span>
</div>
Here are a few different approaches for creating the equilateral triangle shape using CSS. Creation of diagonals is still not any easier but now the shape can at-least have a transparent background even when the body has a gradient (or) an image as its background.
Option 1: Using Pseudo-elements and Skew Transforms
In this method we use a couple of pseudo-elements and skew them in opposite directions (inward) to create the diagonal lines whereas the line at the bottom is produced using a border-bottom on the parent. We can also produce trapezoids using this approach.
Cons: This approach would not work if the body background and shape background are different and the body background is not a solid color.
.triangle {
position: relative;
width: 200px;
border-bottom: 2px solid white;
color: white;
margin: 20px auto;
overflow: hidden;
}
.shape1 {
height: 174px;
}
.shape2 {
height: 101px;
}
.triangle:before,
.triangle:after {
position: absolute;
content: '';
height: 100%;
width: 0%;
bottom: 0px;
transform-origin: left bottom;
}
.triangle:before {
left: 0px;
border-right: 2px solid white;
}
.triangle.shape1:before {
transform: skew(-30deg);
}
.triangle.shape2:before {
transform: skew(-45deg);
}
.triangle:after {
right: 0px;
border-left: 2px solid white;
}
.triangle.shape1:after {
transform: skew(30deg);
}
.triangle.shape2:after {
transform: skew(45deg);
}
.triangle span {
position: absolute;
width: 100%;
text-align: center;
top: 50%;
}
/* Just for demo */
*{
box-sizing: border-box;
}
body {
background: radial-gradient(ellipse at center, #400, #100);
}
.trapezoid {
position: relative;
border-bottom: 2px solid white;
color: white;
margin: 20px auto;
width: 200px;
height: 50px;
}
.trapezoid:before,
.trapezoid:after {
position: absolute;
content: '';
height: 100%;
width: 40%;
bottom: -1px;
border-top: 2px solid white;
transform-origin: left bottom;
}
.trapezoid:before {
left: 0px;
border-left: 2px solid white;
transform: skew(-45deg);
}
.trapezoid:after {
right: 0px;
border-right: 2px solid white;
transform: skew(45deg);
}
.trapezoid span {
position: absolute;
width: 100%;
text-align: center;
top: 30%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='triangle shape1'>
<span>content</span>
</div>
<div class='triangle shape2'>
<span>content</span>
</div>
<br/>
<!-- Just something extra to illustrate -->
<div class='trapezoid'>
<span>content</span>
</div>
<br/>
Here is a variation of Option 1 which would work when the background of the body and that of the shape are different and the body background is a solid color.
.triangle{
position: relative;
width: 200px;
border-bottom: 2px solid black;
color: red;
background: beige;
margin: 20px auto;
overflow: hidden;
}
.shape1{
height: 174px;
}
.shape2{
height: 101px;
}
.triangle:before, .triangle:after{
position: absolute;
content: '';
height: 101%;
width: 100%;
bottom: 0px;
background: red;
transform-origin: left bottom;
}
.triangle:before{
left: -200px;
border-right: 2px solid black;
}
.triangle.shape1:before{
transform: skew(-30deg);
}
.triangle.shape2:before{
transform: skew(-45deg);
}
.triangle:after{
right: -200px;
border-left: 2px solid black;
}
.triangle.shape1:after{
transform: skew(30deg);
}
.triangle.shape2:after{
transform: skew(45deg);
}
.triangle span{
position: absolute;
width: 100%;
text-align: center;
top: 50%;
}
/* Just for demo */
*{
box-sizing: border-box;
}
body{
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='triangle shape1'>
<span>content</span>
</div>
<div class='triangle shape2'>
<span>content</span>
</div>
Here is another variation of Option 1 which supports gradient background for both inside and outside the triangle shape.
.triangle {
position: relative;
width: 200px;
border-bottom: 2px solid white;
color: white;
margin: 20px auto;
overflow: hidden;
}
.shape1 {
height: 174px;
}
.shape2 {
height: 101px;
}
.triangle:before,
.triangle:after {
position: absolute;
content: '';
height: 99%;
width: 50%;
z-index: -1;
transform-origin: left bottom;
}
.triangle:before {
left: 0px;
top: 100%;
border-top: 3px solid white;
background: linear-gradient(90deg, #003333, #773333);
}
.triangle.shape1:before {
border-top: 4px solid white;
transform: skewY(-60deg);
}
.triangle.shape2:before {
transform: skewY(-45deg);
}
.triangle:after {
right: 0px;
top: 0%;
border-top: 3px solid white;
background: linear-gradient(90deg, #773333, #FF3333);
}
.triangle.shape1:after {
border-top: 4px solid white;
transform: skewY(60deg);
}
.triangle.shape2:after {
transform: skewY(45deg);
}
.triangle span {
position: absolute;
width: 100%;
text-align: center;
top: 50%;
}
/* Just for demo */
*{
box-sizing: border-box;
}
body {
background: radial-gradient(ellipse at center, #400, #100);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='triangle shape1'>
<span>content</span>
</div>
<div class='triangle shape2'>
<span>content</span>
</div>
Screenshot:
Triangles with different angles can be easily created by modifying the skew angle and the height of the parent div. But, as we are using skew the borders tend to become thinner as the skew angle approaches 90deg (or -90deg) but that shouldn't be too big a problem because with such high angles you can barely have fit any text inside.
Option 2: Using Linear Gradients
In this method, we use a couple of angled linear-gradient backgrounds (each of which are 50% width of the container) and slant them in opposite directions to produce the diagonal lines.
.triangle {
position: relative;
border-bottom: 2px solid white;
color: white;
margin: 20px auto;
height: 174px;
width: 200px;
background: linear-gradient(to top left, transparent 49.5%, white 49.5%, white 50.5%, transparent 50.5%), linear-gradient(to top right, transparent 49.5%, white 49.5%, white 50.5%, transparent 50.5%);
background-size: 50% 100%;
background-position: 1px 0px, 99px 0px;
background-repeat: no-repeat;
}
.triangle span {
position: absolute;
width: 100%;
text-align: center;
top: 50%;
}
/* Just for demo*/
body {
background: radial-gradient(ellipse at center, #400, #100);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='triangle'>
<span>content</span>
</div>
Cons: Angled gradients are known for producing jagged lines.
Note: Irrespective of which approach is chosen, you would still have to do text wrapping to make the text stay inside the shape.