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.
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
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 this problem: i am not a design person. i just simply dont know how to make this arrow under the rectangle:
i tried to make a div with this background color and hang some image under it, but i am trying to do this for 2 hours now and i am totally stuck not finding a image tool which cuts out in triangle form. then i decided to do this thru css, but cannot somehow do it.
how can i do this triangle in css and hang to div? i want that if i resize window, the triangle should stick to div and doesnot move.
many many thanks for help in advance.
DEMO
HTML
<div class="arrow-down"></div>
css
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
Updated Demo
HTML
<div id="div1"><div class="arrow-down"></div></div>
css
#div1{
width:200px;
height:200px;
background-color:#f00;
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
position:absolute; //added position:absolute
}
js
$(document).ready(function () {
$('.arrow-down').css('top', $('#div1').height() + 5).css('left', '20px');
});
or you can make use of :after only css effect
DEMO
HTML
<div>
<p>Testing triangle</p>
</div>
CSS
div {
margin: 50px;
padding: 10px 20px;
float: left;
background-color: #f00;
position: relative;
}
div:after {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
content:"";
position: absolute;
bottom: -20px;
left: 20px;
}
I'm trying to make a drop down menu, without any images, Pure CSS and HTML like the following:
What I'm not able to do is make this little Triangle shaped trim on Top
is it possible in CSS, if it is, how?
Live Example: http://jsbin.com/owafod/1/
I used CSS triangle generator to create the triangle.
#Nav {
width: 300px;
height: 200px;
background: #333;
}
#Triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #ffffff transparent transparent transparent;
margin: 0 auto;
}
Here's a solution with borders :
Result :
HTML :
<div id=a></div><div id=b></div>
<div id=c></div>
CSS :
#a {
border-right: 5px solid white;
border-bottom: 5px solid black;
width: 100px;
display: inline-block;
margin:0;
}
#b {
border-left: 5px solid white;
border-bottom: 5px solid black;
width: 100px;
display: inline-block;
margin:0;
}
#c {
background: black; height:20px;width:210px
}
Tests
And here's a picture that will probably suffice to explain how it's made and how you can easily use this kind of border trick :
(the code to make it)
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>