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>
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>
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
I am looking for a way to make various geometric shapes using only HTML/CSS. I found my answer here, however it doesn't allows me to give borders to my shape. For instance I can get an inverted isosceles triangle using
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
It gives me this output:
However, now i can't add borders to the triangle like this:
Is there a way i can achieve what i want? Also, is it possible to give effects to it properly (like shadow effects etc.)
Note: I have a limitation of only being able to use inline CSS
Well, It's kind of messy but if the triangle is not dynamic, this should work. The idea is to place another absolutely positioned triangle with appropriate size and borders under the existing one by using :before pseudo element.
Something like this http://jsfiddle.net/84zQL/
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position:relative;
}
#triangle-down:before{
content:"";
position:absolute;
top:-103px;
left:-55px;
width: 0;
height: 0;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
border-top: 110px solid blue;
z-index:-1;
}
davidwalsh.name/css-triangles
Very good article that answers exactly your question.
Potential duplicate of this post. To achieve the border trick, you may need to align two triangles with different sizes i.e. an inner one with slightly smaller borders centered above the other.
The inline example using two triangles:
<div style="
width: 0;
height: 0;
border-bottom: 110px solid blue;
border-left: 70px solid transparent;
border-right: 70px solid transparent;">
<div style="
width: 0;
height: 0;
position: absolute;
top: 6px;
left: 9px;
border-bottom: 99px solid pink;
border-left: 61px solid transparent;
border-right: 61px solid transparent;">
<div/>
<div/>
Demo: http://jsfiddle.net/haf9E/1/
If you want to make shadows, add overlaid triangles with different opacities or blurs, under or above depending on the type of shadows (inset or outset).
I tried some thing by adding an div outside the triangle .
.triangle {
width: 0px;
}
this post
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
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have got an image. Recently I have used image for this. But I think css shape will be more good then using this shape. So can someone kindly tell me how to get this shape only in css. I don't want to use image here. Any help and suggestions will be really appreciable. Thanks...
The image is here
Created this using only HTML and CSS. DEMO
Inspiration from
http://css-tricks.com/examples/ShapesOfCSS/
HTML
<div>
<div id="triangle-topleft"></div>
<div id="triangle-topright"></div>
</div>
CSS
div{
float:left;
}
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 80px solid transparent;
}
#triangle-topright {
width: 0;
height: 0;
margin-left:-5px;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
FIDDLE
Markup is <div></div>
css
div:before
{
content: '';
display: inline-block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 20px 40px 0 0;
border-color: #63071e transparent transparent transparent;
}
div:after
{
content: '';
display: inline-block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 40px 20px 0;
border-color: transparent #63071e transparent transparent;
margin-left: -6px;
}
.bottom {
width:50px;
border-bottom: 3em solid transparent;
border-left: 6.5em solid #efefef;
border-right: 6.5em solid #efefef;
border-top: 0;
}
FIDDLE DEMO
Was this googled??
Please see the following Link:
http://www.howtocreate.co.uk/tutorials/css/slopes
or atleast refer question asked here
Cut Corners using CSS
<style>
.triangle { width:0px;
border-bottom: 30px solid transparent;
border-left: 60px solid #FF0000;
border-right: 60px solid #FF0000;
border-top: 0; }
</style>
<div class="triangle"></div>
Demo here http://jsfiddle.net/EfxEj/
below is the basic idea. how to do it. however you can play with positioning or markup.
HTML
<div>
<span></span>
</div>
CSS
div {
width: 0;
height: 0;
border-left: 0 solid transparent;
border-right: 50px solid transparent;
border-top: 20px solid #f00;
position:relative;
}
span {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 0 solid transparent;
border-top: 20px solid #f00;
position:absolute;
top:-20px;
left:50px;
}
I am very new to stackover flow so will take sometime to adjust to its editor so please overlook my way of presenting the answer.
CSS :
tri1{width: 0px;height: 0px;border-style: solid;border-width: 200px 200px 0 0;border-color: #007bff transparent transparent; }
tri2{padding-right:200px;margin-top:-200px;width: 0px;height:
0px;border-style: solid;border-width: 0 200px 200px 0;border-color:
transparent #007bff transparent transparent; }
now fix the height and width as per ur needs.