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;
}
Related
.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 am trying to code a responsive div with css triangles on each side that has a color the same as my background color, however it breaks when the text gets wraps onto a new line.
Is there any way to code css triangles in a responsive way, where the triangles will grow in height with the text that is wrapping?
.d-block {
background-color: #fff;
height: 60px;
padding: 0;
margin: 30px 0 0 0;
color: #0769ba;
font-size: 1.8rem;
&:before {
position: absolute;
left: 0;
content: "";
border-top: 30px solid #fff;
border-bottom: 30px solid #fff;
border-left: 30px solid #0769ba;
}
&:after {
position: absolute;
right: 0;
content: "";
border-top: 30px solid #fff;
border-bottom: 30px solid #fff;
border-right: 30px solid #0769ba;
}
}
<div class="d-block">This is a specials block and is 100% wide responsive</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>
I'm trying to make something like this:
Where both sides of the button are clickable and link to a different website (have a guess which ones, heh).
https://jsfiddle.net/3HG6d/1836/
The issue I'm having (as can be seen in the jsfiddle) is that the top <a> tag always overlaps the second one, making only one clickable.
CSS:
a {
float:left;
margin:0.5%;
position:absolute;
display:inline-block;
}
/*Up-right pointing*/
.triangle-up-right {
width: 0;
height: 0;
padding-left:10%;
padding-top: 10%;
overflow: hidden;
}
.triangle-up-right:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left:-500px;
margin-top:-500px;
border-left: 500px solid transparent;
border-top: 500px solid #4679BD;
}
/*Down-left pointing*/
.triangle-down-left {
width: 10%;
height: 0;
padding-bottom: 10%;
overflow: hidden;
}
.triangle-down-left:after {
content: "";
display: block;
width: 0;
height: 0;
border-right: 500px solid transparent;
border-bottom: 500px solid #4679BD;
}
EDIT: should show the correct jsfiddle now
You will need to use a rotated square div for each one and match the angle that way. On top of this, you'll need to make sure that they are within a wrapper so that you can hide the overflow so that only the visible portion is clickable.
This thread could be of use.
use the map and area tag.
http://www.w3schools.com/tags/tag_area.asp
use poly and form a rectangle
This works for me:
.social-button {
width: 80px;
height: 80px;
display: block;
margin: 20px;
border-radius: 12px;
overflow: hidden;
position: relative;
}
.social-button a {
display: block;
position: absolute;
top: 0px;
left: 0px;
}
.twitter {
border-top: 0px solid transparent;
border-bottom: 80px solid transparent;
border-right: 80px solid #4679BD;
}
.facebook {
border-top: 80px solid transparent;
border-bottom: 0px solid transparent;
border-left: 80px solid #BD79BD;
}
<div class="social-button">
</div>
Is there a way to create a trapezoid shadow effect underneath a image such as the one in the image?
I only know create trapezoid with border. What i've came up with so far is this:
HTML
<div id="trapezoid"></div>
CSS
#trapezoid {
height: 0;
width: 120px;
border-bottom: 80px solid #05ed08;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
padding: 0 8px 0 0;
}
Thanks in advance.
I've created a jsFiddle that demonstrates a way to do it. In essence: give the image a shadow, overlay a transparent div on it that hides left, top and right border of the shadow. Because of these white borders this trick will not work if you use a complex background.
.wrapper {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;
}
.wrapper img {
box-shadow: 0 0 50px black;
margin: 0px 30px 50px 30px;
}
.wrapper .overlay {
position: absolute;
left: 0;
top: 0;
display: inline-block;
width: 100%;
height: 100%;
border-top: 0px solid white;
border-left: 30px solid white;
border-right: 30px solid white;
border-bottom: 50px solid transparent;
box-sizing: border-box;
}
<div class="wrapper">
<img src="http://i.stack.imgur.com/eg2RH.jpg" width="400" />
<div class="overlay"></div>
</div>