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/
Related
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>
.myButton {
float: right;
border-top: 40px solid pink;
border-left: 40px solid transparent;
border-right: 0px solid transparent;
width: 25%;
}
<div class="myButton">
Submit
</div>
The above is my code. As you can see I want to design a shape like the image below but I want the word Submit to be in the center but it is pushed down.
Anyone know a solution?
You can use linear-gradient background for this. Techique is based on setting fixed height and then applying padding equals height multiplied by √2:
.my-button {
border: 0;
height: 40px;
background: linear-gradient(45deg, transparent 40px, pink 40px);
padding-left: 56.5691px; /* 40 × √2 ≈ 56.5691 */
}
<button class="my-button">Submit</button>
Also you can achieve this via absolutely position pseudoelement:
.my-button {
background-color: pink;
position: relative;
height: 40px;
margin-left: 40px;
border: 0;
}
.my-button:after {
content: "";
position: absolute;
top: 0;
left: 0;
/* Move pseudoelement to the left to 100% of its width */
transform: translateX(-100%);
border-top: 40px solid pink;
border-left: 40px solid transparent;
border-right: 0px solid transparent;
}
<button class="my-button">Submit</button>
The issue with what you have is that you're using a top border instead of a background so your text naturally won't look to be in the center of your shape. What you can do is use positioning to manually move your text up within the shape:
.myButton {
float: right;
border-top: 40px solid pink;
border-left: 40px solid transparent;
border-right: 0px solid transparent;
width: 25%;
position: relative;
}
.inner {
position: absolute;
top: -30px;
left: 40px;
}
<div class="myButton">
<div class="inner">Submit</div>
</div>
I have the following div which aligns to the left side of the screen
css
#nav {
position: fixed;
height: 50px; width: 50px;
display: block;
background-color: #000;
}
This div contains an icon acting as a link
html
<div id="nav">icon</div>
I want the div to be a triangle (pointing towards the right) and not a square
I find this site useful: https://css-tricks.com/examples/ShapesOfCSS/
Right-facing triangle:
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
You can adjust the border properties to change the width, height, and color of the triangle.
Something like this is probably what you're looking for: https://jsfiddle.net/kh2xsoh2/1
HTML
<div id="nav"><span>icon</span></div>
CSS
#nav {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid #000;
border-bottom: 25px solid transparent;
position: fixed;
}
#nav span {
position: absolute;
line-height: 0;
left: -45px;
color: white;
}
This question already has answers here:
html/css hexagon with image inside
(7 answers)
Closed 8 years ago.
http://codepen.io/anon/pen/dqEbA
I'd like to be able to replace some of the green backgrounds with image backgrounds... is this possible with the CSS I'm using now, or do I have to an alternative CSS layout to make it possible?
Here's the CSS for reference:
.hex {
float: left;
margin-left: 3px;
margin-bottom: -26px;
}
.hex .top {
width: 0;
border-bottom: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}
.hex .middle {
width: 104px;
height: 60px;
background: #6C6;
}
.hex .bottom {
width: 0;
border-top: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}
.hex-row {
clear: left;
}
.hex-row.even {
margin-left: 53px;
}
And a snippet of the HTML:
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"</div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
I guess it is, I would use :nth-child(). If, for instance, every third hexagon needs a background image, but they need the same picture:
.hex:nth-child(3n) {background-image: url('third.png');}
Although you can select manually the ones you need to change the background of:
.hex:nth-child(19) {background-image: url('bg19.png');}
.hex:nth-child(26) {background-image: url('bg26.png');}
And so on.
HTML
<div class="hex "><div class="bbc "></div><div class="middle abc"></div><div class="bbb "></div></div>
CSS
.hex .abc
{
background:red;
}
.bbc
{
border-bottom: 30px solid red;
width: 0;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}
.bbb
{
width: 0;
border-top: 30px solid red;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}
Make these Changes and try
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);}