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
Related
I need to create the button styles in the image below (the one on the right is transparent, not white).
The bottom right corner is obviously the tricky part. It's not just a simple bevel; it's slightly rounded.
The best solution I've come up with is to apply an SVG image mask to a pseudo element positioned to the right of the button and reduce the right padding to compensate. But this approach has its limitations:
it requires a fixed height button (at least, if I want maintain the aspect ratio of the corner)
it requires a different SVG for each button size
I don't see how it can work for the transparent button style
So I'm hoping someone can suggest a different/better approach!
Thanks
UPDATE:
Here is my current approach - https://codepen.io/peteheaney/pen/jwVEPm
$primary: #FAB500;
*, *::after, *::before {
font-family: sans-serif;
box-sizing: border-box;
}
.button {
background-image: none;
border-width: 2px;
border-style: solid;
border-color: transparent;
cursor: pointer;
display: inline-block;
font-weight: bold;
margin-bottom: 0;
text-align: center;
text-decoration: none;
text-transform: uppercase;
touch-action: manipulation;
vertical-align: middle;
white-space: nowrap;
transition: all 0.2s;
&:active,
&:hover,
&:focus {
text-decoration:none;
}
&--large {
font-size: 15px;
padding-left: 24.818px;
height: 52px;
line-height: 52px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
position: relative;
margin-right: 24.818px;
&:after {
border-top: 2px solid $primary;
border-bottom: 2px solid $primary;
background: $primary;
content: "";
border-top-right-radius: 6px;
position: absolute;
left: 100%;
bottom: -2px;
width: 24.818px;
height: 52px;
mask: url(http://assets.peteheaney.com.s3.amazonaws.com/button-corner-right.svg) top left / cover;
}
}
&--primary {
color: #000;
background-color: $primary;
border-color: $primary;
&:active,
&:hover,
&:focus {
background-color: darken($primary, 2%);
border-color: darken($primary, 2%);
}
}
}
If you don't mind leaving the corner clickable, you could make the button invisible and just use a background image:
button{
width:x;
height:y;
border:none;
background-color:none
background-image:url(button_image.png);
background-position:center;
background-size:x y;
background-repeat:no-repeat;
}
With button_image.png being the image of your button style without text.
You can try to draw it like this using before and after :
.button {
position: relative;
display: inline-block;
background-color: orange;
color: white;
padding: 20px 40px;
font-size: 14px;
border-radius: 5px;
text-decoration: none;
}
.button:after {
content: '';
position: absolute;
z-index: 10;
display: block;
bottom: -6px;
right: -2px;
width: 10px;
height: 20px;
transform: rotate(45deg);
background-color: white;
}
.button:before {
content: '';
position: absolute;
z-index: 100;
display: block;
bottom: -1px;
right: 4px;
width: 13px;
height: 23px;
transform: rotate(45deg);
background-color: orange;
border-radius: 10px;
}
Button
Here is an example of how this could possibly be achieved with pure CSS.
However an image or an SVG might be a more efficient way to solve this issue.
.Large{
position:relative;
display:inline-block;
background:#FFB300;
border:none;
padding:20px 0 20px 30px;
border-radius:10px 0 0 10px;
height:40px;
font:700 1.5em/40px Arial;
}
.Large::after{
content:"";
display:block;
position:absolute;
top:0;
right:-30px;
width:30px;
height:50px;
background:#FFB300;
border-radius:0 10px 0 0;
}
.Large::before{
content:"";
display:block;
position:absolute;
bottom:0;
right:-30px;
width:0;
height:0;
border-top: 15px solid #FFB300;
border-right: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid #FFB300;
}
<a class="Large">LARGE</a>
I am not really happy with my result, but here it goes just in case you can make it better.
The different color is just to make it easier to see what is what.
I have focused on solving the transparent one. Once you have it, solving the other is easier.
:root {
--width: 10px;
--width2: 14px;
}
.test {
position: relative;
margin: 20px;
width: 300px;
height: 150px;
position: absolute;
border: var(--width) solid transparent;
border-image: linear-gradient(to bottom right, orange 0%, orange 70%, transparent 70%);
border-image-slice: 1;
}
.test:before {
content: "";
position: absolute;
height: 25px;
width: 150px;
right: 29px;
bottom: -10px;
transform: skewX(-45deg);
border: solid 0px transparent;
border-bottom-color: red;
border-bottom-width: var(--width);
border-right-color: red;
border-right-width: var(--width2);
border-bottom-right-radius: 25px;
}
.test:after {
content: "";
position: absolute;
height: 50px;
width: 25px;
right: -10px;
bottom: 29px;
transform: skewY(-45deg);
border: solid 0px transparent;
border-bottom-color: red;
border-bottom-width: var(--width2);
border-right-color: red;
border-right-width: var(--width);
border-bottom-right-radius: 25px;
}
<div class="test"></div>
I decided to go for the approach I have demonstrated in this pen - https://codepen.io/peteheaney/pen/bRBOMq (compiled CSS version below)
*, *::after, *::before {
font-family: sans-serif;
box-sizing: border-box;
}
.button {
background-image: none;
border-style: solid;
border-top-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-right-width: 0;
border-color: transparent;
cursor: pointer;
display: inline-block;
font-weight: bold;
margin-bottom: 0;
text-align: center;
text-decoration: none;
text-transform: uppercase;
touch-action: manipulation;
vertical-align: middle;
white-space: normal;
transition: all 0.2s;
}
.button:active, .button:hover, .button:focus {
text-decoration: none;
}
.button--large {
font-size: 15px;
padding: 16px 0 14px 21px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
position: relative;
margin-right: 21px;
}
.button--large:before {
content: "";
position: absolute;
left: 100%;
top: -2px;
width: 21px;
height: calc(100% - 17px);
border-top-right-radius: 6px;
}
.button--large:after {
position: absolute;
left: 100%;
bottom: -2px;
width: 21px;
height: 21px;
transition: all 0.2s;
}
.button--primary {
color: #000;
background-color: #FAB500;
border-color: #FAB500;
}
.button--primary:before {
background-color: #FAB500;
transition: all 0.2s;
}
.button--primary:active:before, .button--primary:hover:before, .button--primary:focus:before {
background-color: #f0ae00;
border-color: #f0ae00;
}
.button--primary:after {
content: url(http://assets.peteheaney.com.s3.amazonaws.com/button-corner-primary-large.svg);
}
.button--primary:active, .button--primary:hover, .button--primary:focus {
background-color: #f0ae00;
border-color: #f0ae00;
}
.button--secondary {
color: #000;
border-color: #FAB500;
}
.button--secondary:before {
border: 2px solid #FAB500;
border-bottom: 0;
border-left: 0;
transition: all 0.2s;
}
.button--secondary:active:before, .button--secondary:hover:before, .button--secondary:focus:before {
background-color: #FAB500;
}
.button--secondary:after {
content: url(http://assets.peteheaney.com.s3.amazonaws.com/button-corner-secondary-large.svg);
}
.button--secondary:active, .button--secondary:hover, .button--secondary:focus {
background-color: #FAB500;
border-color: #FAB500;
}
<a class="button button--large button--primary" href="">My button</a>
<a class="button button--large button--secondary" href="">My other button</a>
Firstly, I divided the right-hand portion into top and bottom (using :before and :after). The top-right pseudo element just has a background color and a top right border radius. This way the top-right portion can have a flexible height, meaning the buttons don't need to have a fixed height. The bottom right pseudo element is essentially an SVG ( using content: url(/path/to/svg.svg) ). This pseudo element always has a fixed width and height, so it maintains its size and aspect ratio regardless of the width/height of the button.
The outline style button is just a variation on the other style, with more borders and less backgrounds.
The only downside to this approach is the need for a different SVG for each button style. But I'm happy with that compromise.
Another take on Arthur's approach.
If you create the bottom right image (the white corner and the yellow corner border) you are able to position this so it stays to the bottom right and you have the rest of the button to style yourself.
button {
background-image:url(corner.svg);
height: 20px;
padding: 5px;
border-radius: 5px;
background-color: yellow;
background-repeat: no-repeat;
background-position: bottom right;
}
I was tasked with a challenge by a developer to receate this comp with one :before pseudo element and found it outside of my relm of experience, I didn't end up solving the problem but as stated I did manage to recreate the comp with two pseudo element on one selector. Here is a jsfiddle example. http://jsfiddle.net/rt9nbg8j/
body{
width:100%;
margin: 0 auto;
}
h1:before{
border-top:1px solid gray;
border-bottom:1px solid gray;
display:block;
content:"";
height:60px;
width:25%;
float:left;
margin-right:20px;
background:#fff;
}
h1{
height:60px;
display: block;
float:left;
text-align:center;
background:#ccc;
/* border:1px solid red; */
width:100%;
font-size:16px;
font-family:arial;
line-height:4em;
}
h1:after{
border-top:1px solid gray;
border-bottom:1px solid gray;
display:block;
content:"";
height:60px;
width:25%;
float:right;
background:#fff;
}
Here you go.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
text-align: center;
}
h1 {
height: 60px;
display: block;
width: 50%;
margin: 0 auto;
text-align: center;
background: #ccc;
font-size: 16px;
font-family: arial;
line-height: 4em;
padding: 0 2em;
position: relative;
}
h1:before {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%);
content: "";
height: 100%;
width: 100vw;
border-top: 1px solid grey;
border-bottom: 1px solid grey;
}
<h1>Lorem ipsum dolor sit.</h1>
A perfect replica
The solution is to set the title using the :before pseudo-element's content property.
Caveat: This is a poor solution for use in the real world. If this challenge (with its seemingly arbitrary restriction) represents a real-world use case, I suggest refactoring your HTML or CSS to allow for the use of additional markup and/or pseudo-elements or settling for an imperfect (but good enough) replication of the comp.
html,
body {
margin: 0;
padding: 0;
}
h1 {
display: block;
position: relative;
box-sizing: border-box;
width: 100%;
height: 60px;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
background: #fff;
}
h1:before {
content: 'Testing this title';
display: block;
position: absolute;
top: -1px;
right: 25%;
bottom: -1px;
left: 25%;
box-sizing: border-box;
font: bold 16px/60px Arial, sans-serif;
text-align: center;
background: #ccc;
}
<h1></h1>
Update: (just for funsies)
If I were to be literal and true to the challenge to "receate this comp with one :before pseudo element", I would not use any html element other than the de facto body tag.
html {
margin: 0;
padding: 0;
}
body {
display: block;
position: relative;
box-sizing: border-box;
margin: 1em 0;
padding: 0;
width: 100%;
height: 60px;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
background: #fff;
}
body:before {
content: 'Testing this title';
display: block;
position: absolute;
top: -1px;
right: 25%;
bottom: -1px;
left: 25%;
box-sizing: border-box;
font: bold 16px/60px Arial, sans-serif;
text-align: center;
background: #ccc;
}
This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 7 years ago.
I'm Trying to create a banner with a triangular shape at the end.
.wrapper {
padding: 50px;
font-size: 0px;
line-height: 0%;
width: 0px;
border-top: 20px solid gray;
border-bottom: 20px solid gray;
border-right: none;
}
<div class="wrapper">TEXT HERE</div>
Just helping you out with this as you've tried but it didn't worked as you expected... So basic idea is that we can use CSS pseudo elements to create that effect..
.wrapper {
background: #C3C3C3;
padding: 20px;
font-size: 40px;
font-family: Arial;
text-align: center;
position: relative;
}
.wrapper:after {
content: "";
width: 0;
height: 0;
border-top: 42px solid transparent;
border-bottom: 42px solid transparent;
border-right: 40px solid white;
position: absolute;
right: 0;
top: 0;
}
<div class="wrapper">TEXT HERE</div>
Here, am doing nothing fancy, we are using a pseudo element i.e nothing but a virtual element which doesn't exist in the DOM but we can insert it using CSS and positioning that pseudo element to the right side of your wrapper. This will help you get the ribbon like end. Note that the color of the triangle is hard coded and it's not transparent.
here is the fiddle. https://jsfiddle.net/nileshmahaja/s5egaebr/
I have used :after selector to the wrapper div.
CSS
.wrapper {
padding: 0 50px;
font-size: 0px;
line-height: 0%;
width: 0px;
height:120px;
background:#ddd;
position:relative;
width:500px;
}
.wrapper:after {
content:'';
width: 0px;
height: 0px;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-right: 60px solid #fff;
position:absolute;
right:0
}
Try this it works
.wrapper {
font-family: arial;
font-size: 12px;
color: white;
background-color: black;
border: 1px solid white;
padding: 8px;
width: 100px;
text-align: center;
position: relative;
}
.wrapper:after {
content: '';
position: absolute;
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
border-right: 16px solid white;
z-index: 10;
top: 0px;
right: 0px;
}
<div class="wrapper">TEXT HERE</div>
I am interested in creating something like the picture below. A counter box with a transparent background and a thin border, plus an icon in the bottom of that semi circle.
I made something like what I want, see below:
.chartBottom{
width:0;
height:0;
border:60px solid #c45;
border-bottom:60px solid transparent;
border-radius: 60px;
}
But the problem of this trick is that it can't have any transparent background. Any ideas?
use this code instead of using border 60px and setting width and height to zero.use width and height and border 1px;
.chartBottom{
width:60px;
height:60px;
border:1px solid #c45;
border-bottom:1px solid transparent;
border-radius: 60px
}
here is jsfiddle for you to see.
I think this fiddle should help you.
<div class="wrapper">
<div class="chartBottom"></div>
<div class="icon">Icon</div>
</div>
.chartBottom {
width:120px;
height:120px;
border:1px solid #c45;
border-bottom:1px solid transparent;
border-radius: 60px;
}
.icon {
position: relative;
height: 40px;
width: 60px;
top: -30px;
left: 30px;
text-align: center;
border: 1px solid green;
}
.wrapper {
background-color: rgba(0,0,0,0.5);
padding: 3px;
width: 126px;
}
.circleDiv{
width:120px;
height:120px;
border-right:1px solid white;
border-top:1px solid white;
border-left:1px solid white;
border-bottom:1px solid transparent;
border-radius: 50%;
}
Demo
It's pretty easy to add an absolute-positioned icon inside the relative-positioned container (see fiddle).
As for making it responsive, I recommend using media queries to adjust the values to keep the design tight (not included in fiddle).
http://jsfiddle.net/1gtss907/5/
<div class="container">
<div class='chartBottom'>
<h4>56</h4>
<i class="fa fa-thumbs-up"></i>
</div>
<p>Projects done this year</p>
</div>
body {
background: #222;
font-family: "Helvetica Neue", sans-serif;
}
.container {
padding: 8em;
text-align: center;
}
.chartBottom{
border:1px solid #1abc9c;
border-bottom:1px solid transparent;
border-radius: 50%;
color: #fff;
font-size: 20px;
height: 150px;
line-height: 150px;
margin: 0 auto;
position: relative;
text-align: center;
width: 150px;
}
h4 {
font-size: 55px;
font-weight: 900;
margin-top: 0.75em;
}
p {
color: #999;
font-size: 15px;
font-weight: 300;
margin: 5px auto 0;
width: 100px;
}
i {
color: #16a085;
opacity: 0.75;
position: absolute;
bottom: 0;
left: 45%;
}
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