I am trying to use the following arrow :
As a baseline for some boxes.
I would like to use it as a responsive arrow (At the moment it is a .png) Is there a way to make this in pure CSS or even use jQuery and make it responsive?. I imagine I may have to split it into seperate spans to create the effect?
Thanks in advance.
Take a look at CSS3 Shapes. You can use them to create the triangle in your CSS, e.g:
#triangle-down {
width: 0;
height: 0;
border-left: 320px solid transparent;
border-right: 320px solid transparent;
border-top: 200px solid red;
}
You can alter the border sizes to achieve the triangle you are after.
To make it responsive you can use media queries, e.g:
#media all and (max-width : 800px) {
#triangle-down {
width: 0;
height: 0;
border-left: 160px solid transparent;
border-right: 160px solid transparent;
border-top: 100px solid blue;
}
}
DEMO: http://jsfiddle.net/VY7vh/6/
Responsive, 1 div.
HTML
<div class="triangle"></div>
CSS
.triangle {
width: 25%;
padding: 25% 0 0 25%;
}
.triangle:after {
content: "";
display: block;
width: 0; height: 0;
margin: -250px 0 0 -250px;
border-top: 250px solid black;
border-right: 250px solid transparent;
border-left: 250px solid transparent;
}
DEMO
Related
I am creating some CSS illustrations and I want to create a triangular shape. But, you will see that the transparent border is not actually transparent. It is of the same color as the background-color of the <div>.
.triangle {
background-color: #ff3e30;
height: 0px;
width: 0px;
border-bottom: 100px solid #ff3e30;
border-left: 50px solid transparent; /* This is the culprit */
}
<div class="triangle"></div>
But, when I use a different color, it shows that the shape created should be a triangle if the border is transparent.
.triangle {
background-color: #ff3e30;
height: 0px;
width: 0px;
border-bottom: 100px solid #ff3e30;
border-left: 50px solid black; /* Changed to black */
}
<div class="triangle"></div>
So, how to fix that?
The Background-color was in the way.
.triangle {
//background-color: #ff3e30;
height: 0px;
width: 0px;
border-left: 50px solid transparent;
border-bottom: 100px solid #ff3e30;
}
<div class="triangle"></div>
by default the background cover the border area. You can change this behavior using background-clip (or simply remove it like stated by #Mahmood Kiaheyrati)
.triangle {
background-color: #ff3e30;
background-clip:padding-box;
height: 0px;
width: 0px;
border-bottom: 100px solid #ff3e30;
border-left: 50px solid transparent;
}
<div class="triangle"></div>
I hope you are doing well.
Here in this link you will find some triangle shape. You can practice for better understanding that how it works.
https://css-tricks.com/the-shapes-of-css/
css for triangle-bottomleft
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
html
<div id="triangle-bottomleft"></div>
This question already has answers here:
Responsive CSS triangle with percents width
(7 answers)
Closed 6 years ago.
I have a div which is a triangle using CSS borders.
It's currently set to 500px width. however I want to make it take up the full width of the screen while maintaining its triangular pointy shape
https://jsfiddle.net/hra17z5t/1/
#one {
width: 500px;
background-color: aqua;
height: 300px;
}
#two{
border-top: 100px solid red;
border-right: 250px solid transparent;
border-bottom: 100px solid transparent;
border-left: 250px solid transparent;
width: 0;
height: 0;
}
<div id="one"></div>
<div id="two"></div>
I have updated your code example: since you wanted to make it responsive to the full browser width, it's pretty straightforward:
#one {
width: 100vw;
background-color: aqua;
height: 300px;
}
#two {
border-top: 100px solid red;
border-right: 50vw solid transparent;
border-bottom: 100px solid transparent;
border-left: 50vw solid transparent;
width: 0;
height: 0;
}
<div id="one"></div>
<div id="two"></div>
Here we're simply setting the box's width to 100vw, which is 100% of the browser width. Since the dimensions of your triangle respond in the same way, based on your example you can simply set the border widths to 50vw (or half the browser width), and it will grow and shrink responsively.
Using jQuery:
$(window).resize(function () {
var divWidth = $('#one').width();
$('#two').css({
borderLeftWidth: divWidth / 2,
borderRightWidth: divWidth / 2
});
});
$(window).trigger('resize');
#one {
max-width: 100%;
}
JSFIDDLE
Found this on Google when searching "Responsive CSS Triangle"
https://jsfiddle.net/josedvq/3HG6d/
Relevant code is below:
/*Down pointing*/
.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;
}
I am traying to make an angled border, I made a quick paint-ish design on what I mean or try to say :
The green is a logo,centered in the middle.
The paurple are DIV's, the white is white space.
I want the purple DIVs to have those angled edges! I have NO idea how to do this.
I searched for some angled css border but I only found shapes, but I dont understand how it works after reading :/
Anyone that can give me a hand or point me in the right direction? Thanks a Bunch!
I wouldn't try to smash the purple divs into those shapes. I would recommend an HTML setup like this:
<span class="triangle-1"></span>
<div>
<span class="triangle-2"></span>
<span class="logo"></span>
<span class="triangle-3"></span>
</div>
<span class="triangle-4"></span>
And make CSS shapes with the white triangles--a much easier task in CSS. Here's CSS for a perfectly responsive example, which may or may not be what you want:
body {
background: #652f70;
font-size: 0;
margin: 0;
text-align: center;
}
span {
display: inline-block;
}
.triangle-1 {
border-top: 40vh solid #fff;
border-left: 90px solid transparent;
border-right: 90px solid transparent;
}
.triangle-2 {
border-left: 33vw solid #fff;
border-top: 10vh solid transparent;
border-bottom: 10vh solid transparent;
position: absolute;
left: 0;
}
.logo {
background: #78bd52;
height: 20vh;
width: 34vw;
}
.triangle-3 {
border-right: 33vw solid #fff;
border-top: 10vh solid transparent;
border-bottom: 10vh solid transparent;
position: absolute;
right: 0;
}
.triangle-4 {
border-bottom: 40vh solid #fff;
border-left: 90px solid transparent;
border-right: 90px solid transparent;
}
And here's a JSFiddle
Desired result:
A CSS solution where I have a container with width: 100%;, and above and below the container, I have triangles attached that create a parallelogram. The triangles should cover the entire width of the screen.
Problem
I tried with transform, but that also transforms the text inside the container, so that doesn't work to create the desired form. Right now I'm trying with 2 divs, 1 above and 1 under the container, and with border-right css property. The problem here is that it doesn't accept percentages.
Code
HTML:
<div class="triangleUP"></div>
<article class="blue">
Lorem ipsum (times 200)
</article>
<div class="triangleDOWN"></div>
CSS:
.triangleUP {
width: 0;
height: 0;
border-top: 250px solid transparent;
border-right: 1920px solid #344cd0;
overflow:hidden;
}
.blue{
background-color:#344cd0;
color:white;
}
.triangleDOWN{
width: 0;
height: 0;
border-top: 250px solid #344cd0;
border-right: 1920px solid transparent;
}
JSFiddle
I know that with jQuery I could easily manipulate the property, but I'd prefer to keep it CSS only.
A possible solution here would be to use 100vw which is 100% of the viewport width. Here is a table of current browser support.
New CSS:
.triangleUP {
width: 0;
height: 0;
border-top: 250px solid transparent;
border-right: 100vw solid #344cd0;
overflow:hidden;
}
.blue{
background-color:#344cd0;
color:white;
}
.triangleDOWN{
width: 0;
height: 0;
border-top: 250px solid #344cd0;
border-right: 100vw solid transparent;
}
Result:
If you want the triangle to be responsive but with a set width which is not 100% of the screen, you can use calc.
.bg{
background: #000;
width: 100%;
height: 100vh;
margin: 0;
}
.bg:after{
content: '';
width: 0;
display: block;
border-style: solid;
border-width: calc(100vh - 50px) calc(100vw - 50px) 0 0;
border-color: #fedbda transparent transparent transparent;
position: absolute;
top: 8px;
margin: 25px;
}
<div class="bg">
</div>
I need to create a corner block with CSS & html5.
Can somebody help me? Thanks.
update:
first of all, it should be div. I have image on my site, this is screen:
Answer:
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
Are you looking to make a triangular div show up under your rectangular div? If so see this jsFiddle.
The CSS:
.triangle {
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 40px solid #999;
}
The HTML:
<div class="triangle"></div>