I'm looking for a way to draw a special shape like in the picture using Css3. Any idea or drawing way to draw that shape using Css3?
I have referenced several ways but it just draws into a normal triangle.
#shape {
width: 0;
height: 0;
border-left: 72px solid transparent;
border-right: 0px solid transparent;
border-bottom: 72px solid red;
}
<div id="shape"></div>
you can add border-bottom-right-radius in your #shape css. you just need to set the border-left to white or depending on your background color of your div to match the color
#shape {
width: 0;
border-left: 72px solid white;
border-right: 0px solid transparent;
border-bottom: 72px solid red;
border-bottom-right-radius: 20px;
}
<div id="shape"></div>
it can be done using an after element on shape
#shape{
width: 100px;
height: 100px;
border-left: 0px solid transparent;
border-top: 0px solid transparent;
border-right: 1px solid blue;
border-bottom:1px solid blue;
border-bottom-right-radius: 25px;
position: relative;
overflow: hidden;
}
#shape::after{
content:"";
position: absolute;
background-color: blue;
width: 1px;
height: 150%;
bottom: 0;
transform-origin: bottom;
transform: rotateZ(45deg);
}
<div id="shape"></div>
Related
When adding rotation to the div in the picture, this grey line appears. Without transforming (rotating) it, this does not happen. How can I get rid of this grey line? The background and borders are supposed to be transparent. The elements are rotatable, therefore I need this css property.
.bow {
position: absolute;
width: 30px;
height: 30px;
border-top: 3px black solid;
border-top-right-radius: 50px; /* 100px of height + 10px of border */
border-top-left-radius: 0;
border-bottom-right-radius: 0;
background-color: transparent;
box-shadow: 3px 0 0 0 black;
transform: rotate(20deg);
border-bottom: 0;
border-right:0;
}
<div class="bow"></div>
It looks like box-shadow is causing the problem here. If you remove that and also add a border-right property (same values as border-top), you can get the same look without the extra gray line:
.bow {
position: absolute;
width: 30px;
height: 30px;
border-top: 3px black solid;
border-right: 3px black solid;
border-top-right-radius: 50px; /* 100px of height + 10px of border */
background-color: transparent;
transform: rotate(20deg);
}
<div class="bow"></div>
.bow {
position: absolute;
width: 30px;
height: 30px;
border-top: 3px black solid;
border-right: 3px black solid;
border-top-right-radius: 50px;
background-color: transparent;
transform: rotate(20deg);
border-bottom: none;
}
<div class="bow">
</div>
Consider removing the box-shadow.
.bow {
position: absolute;
width: 30px;
height: 30px;
border-top: 3px black solid;
border-top-right-radius: 50px; /* 100px of height + 10px of border */
border-top-left-radius: 0;
border-bottom-right-radius: 0;
background-color: transparent;
/* box-shadow: 3px 0 0 0 black; */
transform: rotate(20deg);
border-bottom: 0;
border-right:0;
}
<div class="bow">
</div>
I am trying to make a top-left triangle (red) with a (black) border. I want it to have the black border all the way around. This attempt angles a square to fake it (pushed outside the screen to mimmick a triangle)
I want the border all the way around, in which my attempt won't work
#corner {
height: 75px;
width: 100px;
position: absolute;
left: -3em; top: -2em;
z-index: 999;
transform: rotateZ(-45deg);
background-color: red;
border-bottom: 5px solid #0c0c0c;
}
<div id="corner"></div>
There is an easier way to create triangles, you can just use an element with a width / height of 0.
And for the border you want, the idea is to have two overlapping triangles in two different colors and different sizes, maybe take a look at the following snippet:
.triangle-up-left-1 {
width: 0;
height: 0;
border-top: 50px solid rgb(246, 85, 85);
border-right: 50px solid transparent;
z-index:2;
position:absolute;
top:5px;
left:13px;
}
.triangle-up-left-2 {
width: 0;
height: 0;
position:absolute;
top:0;
border-top: 68px solid rgb(0, 0, 0);
border-right: 68px solid transparent;
z-index:1:
}
<div class="triangle-up-left-1"></div>
<div class="triangle-up-left-2"></div>
You can made triangle also like this: https://css-tricks.com/examples/ShapesOfCSS/
I tried to combine two of them and with margin to position it, so it would look as one with a border. Perhaps this is a possible solution for you. Cheers.
.triangle1 {
width: 0;
height: 0;
border-top: 100px solid black;
border-right: 100px solid transparent;
}
.triangle2 {
width: 0;
height: 0;
border-top: 82px solid red;
border-right: 82px solid transparent;
position: absolute;
margin-top: -95px;
margin-left: 5px;
}
<div class="triangle1">
<div class="triangle2"></div>
</div>
Please take a look here:
http://jsfiddle.net/ztu267zp/1/
border:3px solid grey;
border-bottom: 8px solid red;
At the bottom corners you can see, that both the grey and the red borders intersect diagonally.
Can I cut the grey border to end at the bottom of the DIV and the red border having 100% width over the full distance?
Thank you very much,
Doing it right now with box-shadows, but also here, there is no clean edge in Chrome and FF:
http://imgur.com/mf7ABEO
Thanks
matt
its not possible but you can use something like this
<div id="bord">
<div class="line-cover">
</div>
css
#bord{
height:200px;
width:200px;
border:3px solid grey;
border-bottom: 8px solid white;
}
.line-cover{
position: relative;
border-bottom: 8px solid red;
width: 100%;
top: 200px;
padding: 0 3px;
left: -3px;
}
Fiddle here
What about st. like that, using pseudoelement after?
#bord{
height:200px;
width:200px;
border:3px solid grey;
border-bottom: 0;
/*border-bottom: 8px solid red;*/
position: relative;
}
#bord:after {
display: block;
background: red;
height: 8px;
width: 100%;
content: '';
position: absolute;
bottom: -8px;
left: 0;
margin: 0 -3px;
padding: 0 3px;
}
http://jsfiddle.net/ztu267zp/4/
HTML:
<div class="arrow-right"></div>
CSS:
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
Result:
Is there any way I can produce a 1 pixel border on the two sides of the result? (the non 180 degree ones)?
Thanks
100% pure CSS, no... but add an extra div in there and:
HTML
<div class="arrow-right">
<div></div>
</div>
CSS
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid black;
}
.arrow-right > div {
width: 0;
position: relative;
left: -60px;
top: -59px;
border-top: 59px solid transparent;
border-bottom: 59px solid transparent;
border-left: 59px solid green;
}
http://jsfiddle.net/qJJxm/
(replace every instance of 59 with a smaller number to make a wider border - all four should always be the same number)
You can add a border through before or after pseudo-elements, shifted one pixel to the left.
.arrow-right,
.arrow-right:after {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid black;
}
.arrow-right:after {
border-left-color: green;
content: '';
display: block;
position: relative;
left: -61px;
top: -60px;
}
http://jsfiddle.net/Nh63r/
I'm making a website for death metal promos and was wondering if it was possible to make a pentagram in CSS3 using border attributes. I was able to find some references that lead me to believe it was possible to make a six-point star, but after several hours of mental torment I have given up on making a 5 point star. Is this possible?
A hexagram consists of two triangles and thats how css3 can pull it off with the following code:
#six-point-star {
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 80px solid black;
}
#six-point-star:after {
content:"";
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 80px solid black;
margin: 30px 0 0 -50px;
}
But it gets confusing with 5 points because it can't be broken up into smaller polygons. Any knowledge as to how I could implement this would be great.
http://jsfiddle.net/8FjL2/1/
http://www.skinit.com/assets/seo/jumbo_shot/jumbo_shot50039084/pentagram.jpg
solution to what has been asked here
Fiddle
<div id="pentagram"></div>
#pentagram {
position: absolute;
width: 0;
height: 0;
border-right: 120px solid transparent;
border-left: 120px solid transparent;
border-bottom: 80px solid black;
top:100px;
left:50px;
}
#pentagram:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-right: 120px solid transparent;
border-left: 120px solid transparent;
border-top: 80px solid black;
-webkit-transform: rotate(34deg);
margin:6px 0 0 -122px;
}
#pentagram:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 120px solid transparent;
border-bottom: 120px solid transparent;
border-right: 80px solid black;
-webkit-transform: rotate(15deg);
margin:-74px 0 0 -42px;
}
Well by doing a little bit of Googling, I found this site. By fiddling around a little bit (I pressed F12), I found this:
HTML:
<div id="pentagram">
<div id="star_1"></div>
<div id="star_2"></div>
<div id="star_3"></div>
<div id="star_4"></div>
<div id="star_5"></div>
</div>
CSS:
#pentagram{margin:0 auto;margin-top:45px;margin-bottom:75px;height:500px;width:500px;border-radius:500px;border:5px solid #bb0000;position:relative;}#pentagram div{position:absolute;background:#bb0000;width:476px;height:5px;}
#star_1{top:328px;left:12px;}
#star_2{top:183px;left:-38px;transform:rotate(-37deg);-ms-transform:rotate(-37deg);-webkit-transform:rotate(-37deg);}
#star_3{top:183px;right:-38px;transform:rotate(37deg);-ms-transform:rotate(37deg);-webkit-transform:rotate(37deg);}
#star_4{top:268px;right:-60px;width:480px !important;transform:rotate(107deg);-ms-transform:rotate(107deg);-webkit-transform:rotate(107deg);}
#star_5{top:268px;left:-60px;width:480px !important;transform:rotate(-107deg);-ms-transform:rotate(-107deg);-webkit-transform:rotate(-107deg);}