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>
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;
}
How would I achieve the following as seen in the image below, in the best way as possible? I want a thick top border, but as it goes down I want the sides to become thinner and just "mend" (if that's right expression) into the black block.
This is my CSS code for the black block:
.containerMain {
background: #000;
padding: 15px;
border-radius: 5px;
width: 250px;
}
You can use the after pseudo-element to position an upside-down trapezoid behind your element.
Look here for a trapezoid shape example.
body { padding: 30px; }
.containerMain {
background: black;
padding: 15px;
border-radius: 5px;
width: 250px;
height: 250px;
position: relative;
}
.containerMain:after {
content: '';
border-radius: inherit;
margin: -20px;
margin-top: -25px;
width: 100%;
height: 50%;
position: absolute;
z-index: -1;
/* upside-down red trapezoid props */
border-top-width: 150px;
border-top-style: solid;
border-top-color: red;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
<div class="containerMain"></div>
I am trying to make a custom element on a wordpress website. It is one of those downward pointing triangles leading into the next page section, but it also has a number on top of it.
My problem is that the way I have it now, the number becomes hidden behind the background of the section above, and I can't get the number/text to remain ontop, which is exacerbated when seen via mobile. changing the z-index didn't help.
This is the css I am using:
/**to create triangle in middle of page **/
div.arrow-down-tan {
width: 0;
height: 0;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
border-top: 35px solid #f6f6f6;
position: relative;
left: 50%;
margin-left: -55px;
margin-top: -3%;
padding: 0;
z-index: 2;
}
/**to create text ontop of triangle **/
div.arrow-text {
position: absolute;
left: 50%;
margin-left: -1.25%;
top: -8%;
color: grey;
font-size: 20px;
z-index: 10;
}
And the html I am using (raw html within a wordpress visual composer page section - which may be part of the problem as well since it is the preceding page section's background which is covering the number):
<div class="arrow-down-tan"></div>
<div class="arrow-text">3</div>
Any help would be greatly appreciated. Many thanks!
Not sure if this will work perfectly in mobile..
https://jsfiddle.net/Hastig/n2w9pv08/
css
.d-arrow {
position: absolute;
left: 46%;
width: 0px;
height: 0px;
border-style: solid;
border-width: 40px 30px 0px 30px;
border-color: #CCCCCC transparent transparent transparent;
/* background-color: red; */
}
.d-arrow-text {
position: relative;
margin: -35px 0px 0px -7px;
padding: 0px 0px 0px 0px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
font-size: 20px;
line-height: 20px;
color: #000000;
text-shadow: none;
}
html
<div class="d-arrow">
<div class="d-arrow-text">3</div>
</div>
div.arrow-down-tan {
position: relative;
margin-left: -55px;
margin-top: 0;
padding: 0;
z-index: 2;
}
div.arrow-down-tan:after {
width: 0;
height: 0;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
border-top: 35px solid red;
position: absolute;
left: 50%;
margin-left: -55px;
margin-top: 0;
padding: 0;
z-index: 2;
content:"";
}
/**to create text ontop of triangle **/
div.arrow-text {
position: absolute;
left: 49.5%;
top: 0;
color: white;
font-size: 20px;
z-index: 10;
}
<div class="arrow-down-tan"><div class="arrow-text">3</div></div>
I am trying to make an arrow overlap onto the div below it (the way the gray arrow overlaps onto the red on http://tinyletter.com).
Here is the code I am currently using:
#box_1 {
height: 550px;
width: 100%;
font-size: 4.5em;
font-weight: 600;
float: center;
text-align: center;
background-color: #ededed;
padding: 55px 0 0 0;
}
.arrow-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid #ededed;
margin-left:auto;
margin-right:auto;
}
#box_2 {
height: 600px;
width: 100%;
font-size: 7em;
float: center;
text-align: center;
background-color: #ed2227;
}
If you're able to rely upon use of the ::after (or ::before) pseudo-elements, then this is relatively easy simply using borders:
#top {
position: relative;
background-color: #ccc;
}
#top::after {
position: absolute;
content: '';
top: 100%;
left: 50%;
margin: 0 0 0 -1em;
border: 1em solid transparent;
border-top: 1em solid #ccc;
}
JS Fiddle demo.
I want to make a CSS only speech bubble. So far, I have this...
Example
CSS
div {
position: relative;
background: #fff;
padding: 10px;
font-size: 12px;
text-align: center;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
div:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: -60px;
margin-left: -15px;
border-width: 30px 20px 30px 20px;
border-style: solid;
border-color: #fff transparent transparent transparent;
}
jsFiddle.
...which is almost exactly what I want. However, I want a light border around the whole thing.
Obviously, on the main portion, that is simple as adding border: 1px solid #333 to the div.
However, as the tail of the bubble is a border hack, I can't user a border with it.
I tried setting a box shadow of 0 0 1px #333 but browsers apply the border to the rectangular shape of the element (which I guess is what they should do).
jsFiddle.
My next thoughts were finding a Unicode character that looks like a bubble tail and absolutely positioning it there, with text-shadow for the border and using z-index of the main bubble to hide the top shadow of the text.
What Unicode character would be suitable for this? Should I do something different? Do I need to resort to an image?
I only have to support Mobile Safari. :)
<div>Hello Stack Overflow!<span></span></div>
div span:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: -51px;
margin-left: -15px;
border-width: 20px 20px 30px 20px;
border-style: solid;
border-color: #000 transparent transparent transparent;
}
http://jsfiddle.net/QYH5a/
For the Unicode character approach you suggested, the most appropriate would be ▼ U+25BC BLACK DOWN-POINTING TRIANGLE. I don't know whether iOS has glyphs for it.
Here is a similar solution:
http://jsfiddle.net/JyPBD/2/
<div>Hello Stack Overflow!<span></span></div>
body {
background: #ccc;
}
div {
position: relative;
background: #fff;
padding: 10px;
font-size: 12px;
text-align: center;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border: 1px solid #333;
}
div:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: -60px;
margin-left: -16px;
border-width: 30px 20px 30px 20px;
border-style: solid;
border-color: green transparent transparent transparent;
}
div span
{
border-color: #FF0000 transparent transparent;
border-style: solid;
border-width: 25px 15px;
bottom: -51px;
margin-left: -65px;
position: absolute;
z-index: 10;
}
You could use the filter property with box-shadow() to do it...
-webkit-filter: drop-shadow(1px 1px 1px #111) drop-shadow(-1px -1px 1px #111);
jsFiddle.