How can I create a vertically tilted line using css, like seen below?
Try playing with border
.progressbar{
position: relative;
overflow: hidden;
height: 10px;
background: #eee;
}
.progressbar > i{
position: absolute;
width: 60%;
border-top: 10px solid #0bf; /* same as parent height */
border-right: 3px solid transparent; /* diagonality :) */
}
<div class="progressbar"><i></i></div>
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 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;
}
I can't find what I need. I have this code
<hgroup id="subheader">
<h1>lorem ipsum</h1>
<h2>ipsum lorem</h2>
read More
</hgroup>
I want the link to have a border with a down triangle at the bottom. But it has to be transparent, because it goes in front of an image. Is that possible?
The shape given in question is a bit complex to achieve with full transparency because of the area cut by the arrow having to be transparent too. Because of this, the techniques that are generally used for creating such tool-tip like shapes cannot be used as-is here. However, there is a still a way to achieve it using CSS and it is as follows:
Use the parent hgroup for the shape with borders on top, left and right and add border-radius. Don't add any border to the bottom because then cutting the space for the arrow would be tough.
Use two pseudo elements (:before and :after) which have the same height as the parent but lesser width such that they produce a tiny gap when positioned absolutely with respect to parent. Add border-bottom alone to these pseudo-elements.
Add a pseudo-element for the arrow on the arrow-down element (a) and create the arrow using rotate(45deg) transforms instead of using the border trick. The transform method is very helpful for creating transparent arrows. Position this arrow again absolutely with respect to the parent.
As we are dealing with transforms, triangle shapes etc the position values need to be calculated based on Math theorems.
* {
box-sizing: border-box;
}
.container {
height: 300px;
width: 500px;
background: url(http://lorempixel.com/500/300/nature/2);
padding: 10px;
}
#subheader {
position: relative;
width: 400px;
height: auto;
border: 1px solid black;
border-bottom: none;
border-radius: 12px;
padding: 10px;
}
.arrow-down{
display: inline-block;
}
.arrow-down:after {
position: absolute;
content: '';
bottom: -10px; /* half the height of the element */
left: 50px; /* some aribitrary position */
height: 20px;
width: 20px;
transform: rotate(45deg);
transform-origin: 50% 50%; /* rotate around center which is at 60px from left */
border-right: 1px solid black;
border-bottom: 1px solid black;
}
#subheader:after {
position: absolute;
content: '';
left: 74px; /* center point of arrow + 1/2 of hypotenuse */
height: 100%;
width: calc(100% - 74px); /* 100% - value of left */
bottom: 0px;
border-bottom: 1px solid black;
border-bottom-right-radius: inherit; /* same border-radius as parent */
}
#subheader:before {
position: absolute;
content: '';
height: 100%;
width: 46px; /* center point of arrow - 1/2 of hypotenuse */
left: 0px;
bottom: 0px;
border-bottom: 1px solid black;
border-bottom-left-radius: inherit; /* same border-radius as parent */
}
<div class='container'>
<hgroup id="subheader">
<h1>lorem ipsum</h1>
<h2>ipsum lorem</h2>
Read More
</hgroup>
</div>
Here is a working version of what you're after.
HTML
<div style="display:none" class="tri-down">Your Content will go into this fancy tri-down</div>
CSS --- I ADDED a background img to show that its transparent as you said that you were going to be having an image behind it.
body {
background: #333 url("http://a2.files.readwrite.com/image/upload/c_fit,cs_srgb,dpr_1.0,q_80,w_620/MTIyMzI3NDY5NDAyMzg1Njg5.jpg") fixed;
}
.tri-down {
/* Styling block element, not required */
position: relative;
margin-bottom: 2em;
padding: 1em;
width: 75%;
border: 1px solid #999;
background: #f3f3f3;
border-radius:5px;
opacity: 0.5;
/*you may want to set the z-index level of your tri-down box.
z-index: 100;
*/
}
/* Required for Down Triangle */
.tri-down:before, .tri-down:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-bottom: 0;
}
/* Stroke */
.tri-down:before {
bottom: -16px;
left: 21px;
/* If 1px darken stroke slightly */
border-top-color: #777;
border-width: 16px;
}
/* Fill */
.tri-down:after {
bottom: -15px;
left: 22px;
border-top-color: #f3f3f3;
border-width: 15px;
}
JSFIDDLE HERE
http://jsfiddle.net/LZoesch/dk43s2qz/
You will want to hide the DIV that is going to house your content. I added it to the above HTML code.
style="display:none"
Then you want to call the link on click and toggle the div class tri-down on/off
<script type="text/javascript">
$(function(){
$('#').click(function(){
$('#').toggle();
$('#').toggle();
});
});
</script>
Here is your orignal code.
<hgroup id="subheader">
<h1>lorem ipsum</h1>
<h2>ipsum lorem</h2>
read More
</hgroup>
If you dont want to set the opacity if your div, you can also try this below.
body {
background: url(http://a2.files.readwrite.com/image/upload/c_fit,cs_srgb,dpr_1.0,q_80,w_620/MTIyMzI3NDY5NDAyMzg1Njg5.jpg);
font-family: sans-serif;
text-align: center;
}
body > div {
color: #000;
margin: 50px;
padding: 15px;
position: relative;
}
.tri-down {
border: 5px solid #000;
content: "";
position: absolute;
}
you can try this one:
.tri-down {
/* Styling block element, not required */
position: relative;
margin-bottom: 2em;
padding: 1em;
border: 1px solid #999;
background: #f3f3f3;
border-radius:5px;
}
/* Required for Down Triangle */
.tri-down:before, .tri-down:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-bottom: 0;
}
/* Stroke */
.tri-down:before {
bottom: -16px;
left: 21px;
/* If 1px darken stroke slightly */
border-top-color: #777;
border-width: 16px;
}
/* Fill */
.tri-down:after {
bottom: -15px;
left: 22px;
border-top-color: #f3f3f3;
border-width: 15px;
}
DEMO
You may need to overlay two images and absolutely position them. Like something along the lines of:
body{
padding:2em;
}
#subheader h1{
font-size:1.5em;
margin-top:0;
}
#subheader h2{font-size:1.2em;}
#subheader
{
position: relative;
max-width:300px;
min-height:1.5em;
padding: 20px;
background: #FFFFFF;
border: #dedede solid 2px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
#subheader:after
{
content: "";
position: absolute;
bottom: -19px;
height:13px;
widht:12px;
left: 10%;
border-style: solid;
border-width: 20px 13px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
}
#subheader:before
{
content: "";
position: absolute;
bottom: -22.5px;
left: calc(10.5% - 3px) ;
border-style: solid;
border-width: 23px 15px 0px;
border-color: #dedede transparent;
display: block;
width: 0;
z-index: 0;}
Like in this pen
I am trying to add a border left to my selected buttons but there seems to be something odd happening I can't figure out.
You can see it in this JSFiddle.
The blue border on the left seems to have an odd 1px above it? It just doesnt sit perfectly square as i would have hoped.
HTML:
<div id="sidebarnav">
<br>
<div class="button-selected">Blog</div>
</div>
CSS:
#sidebarnav {
width:250px;
background-color:#202020;
height: 100%;
float:left;
position:fixed;
border-right: 1px solid #bbb;
}
.button-selected {
text-align:left;
width: 236;
padding-left: 10px;
padding-top: 6px;
padding-bottom: 6px;
background-color:#161616;
color: #fff;
border-top: 1px solid #0A0A0A;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.04) inset;
overflow:auto;
cursor: pointer;
border-left: 4px solid #3498db;
}
You could work around the corner seam issue by adding a pseudo-element that acts like a border. Something like the following:
.button-selected {
/* all of your original styling here */
position: relative; /* relative positioning required for position
absolute on pseudo element */
padding-left: 14px; /* 4px of padding added to compensate for
width of pseudo element */
}
.button-selected:after {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 4px; /* width of desired 'border' effect */
background: #3498db;
}
Updated example of your jsfiddle here.
I have element with 3 borders: left (4px), top (1px) and bottom (1px):
But border-left looks like this:
how to set border-left outside of the box, to make render without cutting of edges?
This is Example of my code:
HTML:
<a class="element">Some Text</a>
CSS:
.element {
display: block;
width: 200px;
height: 40px;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
border-left: 4px solid red;
}
Solved problem using :before pseudo element in CSS:
.element {
display: block;
width: 200px;
height: 40px;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
position: relative; /* Make sure you have this */
padding-left: 8px; /* Nudge the text by few pixels in the box */
}
.element:before {
content: "";
background-color: red;
display: block;
width: 4px;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
This should solve the problem:
-webkit-background-clip:padding;
-moz-background-clip:padding;
background-clip:padding-box;
Look at the simple example :
<div style="height: 100px; width: 100px; background: black; color: white; outline: thick solid #00ff00">SOME TEXT HERE</div>
<div style="height: 100px; width: 100px; background: black; color: white; border-left: thick solid #00ff00">SOME TEXT HERE</div>
this may help you.
Add padding to the left side.
.element {
padding-left:4px;
}
DEMO here.