I am trying to have a border only for top and border with a line that is thick (4px) in the middle and at the ends goes to zero. Like in the pic
.hervorheben{
line-height: 1.6em;
margin-bottom: 1.6em;
margin-top: 1.6em;
text-rendering: optimizeLegibility;
border-top: 1px solid #105322;
border-bottom: 1px solid #105322;
padding: 19px;
margin: auto auto;
}
Do you know how to do so with only css?
You can`t make border like that but you can manage with Pseudo-element (after) like following
.your_class {
position: relative
}
.your_class:after {
position: absolute;
width: 100%;
height: 4px;
background: #000;
border-radius: 100%;
content: "";
top: 0;
left: 0;
}
Enjoy....
Related
I'd like to add a speech-bubble point on the top-right corner of my mat-menu-list but it doesn't seem to work. Is this possible?
I attempted wrapping the mat-menu-list with the below code:
.menuPoint {
position: relative;
background: #143342;
color: #FFFFFF;
font-family: Arial;
font-size: 20px;
line-height: 120px;
text-align: center;
width: 250px;
height: 120px;
border-radius: 10px;
padding: 0px;
}
.menuPoint:after {
content: '';
position: absolute;
display: block;
width: 0;
z-index: 1;
border-style: solid;
border-width: 0 0 20px 20px;
border-color: transparent transparent #143342 transparent;
top: -20px;
left: 95%;
margin-left: -10px;
}
<div class="menuPoint"></div>
Are you looking for something like this? I just played a bit around with the position values, removed z-index from the pseudo-element and removed the border-radius from the top right corner where the pseudo-element is generated.
.menuPoint {
position: relative;
background: #143342;
color: #FFFFFF;
font-family: Arial;
font-size: 20px;
line-height: 120px;
text-align: center;
width: 250px;
height: 120px;
border-radius: 10px 0px 10px 10px;
padding: 0px;
/* for demo purpose */
margin-top: 50px;
}
.menuPoint:after {
content: '';
position: absolute;
display: block;
border-style: solid;
border-width: 0 0 20px 20px;
border-color: transparent transparent #143342 transparent;
top: -20px;
right: 0;
}
<div class="menuPoint">hey there!</div>
I am finding that applying a transform:skewX() to an element blurs its poition vertically(!) in Firefox. Does anyone know why, or how to fix this?
HTML
<div id="tab"><span>Tab</span></div>
<div id="content">Content</div>
CSS
#tab {
display: inline-block;
margin-left: 2em;
position: relative;
width: 3em;
text-align:center;
padding: .375em 0 0.125em;
}
#tab span {
position: relative;
z-index: 10;
}
#tab:before,
#tab:after {
position: absolute;
content: '';
top: 0;
width: 60%;
height: 100%;
border-top: 2px solid #999999;
background-color: #ffffff;
z-index: 1;
}
#tab:before {
left: 0;
transform: skewX(-20deg);
border-left: 2px solid #999999;
border-top-left-radius: 6px;
}
#tab:after {
right: 0;
transform: skewX(20deg);
border-right: 2px solid #999999;
border-top-right-radius: 6px;
}
#content {
border: 2px solid #999999;
border-radius: 6px;
padding: 4px;
margin-top: 0px;
}
The result is as below (zoomed image). Note the #content box's border showing through where they don't overlap, and the fuzziness at the top of the tab (both above and below the 2px width). By comparrison, when removing the skewX() for a straight tab, the border becomes pixel-perfect.
Is there any way to force the element's vertical pixel-alignment when it is subjected to a skewX() transform?
I've been playing around with triangle "hack" with css, but can't make it work with gradient background color.
.m--label {
position: relative;
font-size: .9em;
height: 40px;
margin: 0;
padding: 0 10px;
color: #fff;
background-color: #E00000;
line-height: 38px;
}
.m--label:after {
margin: 0;
padding: 0;
right: 0;
float: right;
position: absolute;
content: "";
border-top: 40px solid #E00000;
border-right: 40px solid #2b2b2b;
border-bottom: 0px solid #E00000;
}
If I change the border-top or bordem-bottom colors to gradient like this:
border-top: 40px solid -webkit-linear-gradient(top, rgba(224,0,0,1) 0%,rgba(255,59,0,1) 100%);
it completely fades the triangle, so it appears like a simple box. Also, with this solution it would only work with Chrome. What could be the solution for this?
maybe a gradient background would be more easy to manage :
.m--label {
position: relative;
font-size: .9em;
height: 40px;
margin: 0;
padding: 0 10px;
color: #fff;
background-color: #E00000;
line-height: 38px;
background-image:linear-gradient(-225deg, transparent calc(100% - 40px), rgba(224,0,0,1) calc(100% - 40px),rgba(255,59,0,1) calc(100% - 20px));
}
<div class="m--label"></div>
I am using the following code and want to add a triangle either in the css3 format or the image based
here is my css
<div id="middleMenu">
<span class="selected">
View Stuff
</span>
<span class="text">
View Gnen
</span>
</div>
Here is the css for the above
#middleMenu {
position: absolute;
width: 300px;
margin: 84px 40%;
padding-top: 5px;
color: #fff;
font-weight: bold;
font-size: 14px;
vertical-align: middle;
}
.traingle {
background: url(../images/arrow.png) no-repeat;
top: 31px;
left: 15px;
position: relative;
text-indent: -9999px;
}
#middleMenu span.selected {
background: url(../images/middleMenu.png) repeat;
color: white;
padding-top: 14px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 14px;
}
.text {
top: 10px;
}
#middleMenu span {
color: white;
padding-top: 14px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 14px;
}
files added which help generating the arrow key
You can create a triangle in CSS like so:
#Triangle pointing upwards
.div {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #000;
}
#Triangle pointing downwards
.div {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #000;
}
jsfiddle.net/dPB75/2
I'm sure you can see where this is going to create one facing left or right.
You can change the size of the triangle by the width of the borders.
Also, you misspelled triangle
how we can create a diagonal heading line with pure CSS like mentioned below image :-
By using the :after pseudoelement and transparent borders, it's easy. If you add the :before part, you even get anti-aliasing (of course it is your task to calculate the 50% color):
http://jsbin.com/ejomav/3/edit#javascript,html,live
<div>New Music</div>
<div>Old Music</div>
div {
float: left;
margin-right: 2.5em;
line-height: 2em;
width: 110px;
position: relative;
font-family: sans-serif;
font-weight: bold;
color: white;
background: black;
}
div:after {
content: ' ';
display: block;
position: absolute;
width: 0px;
height: 0px;
top: 0;
right: -2em;
border: 1em solid transparent;
border-bottom: 1em solid black;
border-left: 1em solid black;
}
div:before {
content: ' ';
display: block;
position: absolute;
width: 0px;
height: 0px;
top: 0px;
margin-right: -1px;
right: -2em;
border: 1em solid transparent;
border-bottom: 1em solid #8080FF;
border-left: 1em solid #8080FF;
}
it seems the most appropriate example (the image you provided before you updated your question is the same):
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-diagonal-lines-with-css/
HTML
Rohit AZAD
CSS
a {
padding:10px;
text-decoration:none;
color:white;
height:0;
line-height:50px;
display:inline-block;
font-weight:bold;
border-right:30px solid transparent;
border-bottom:30px solid blue;
}
demo :- http://jsbin.com/uhibub/edit#html,live