I follow this link How to get 'div' shaped as a flag with CSS but now I can't remove dotted line. The code:
div {
height: 100px;
width: 100px;
margin: 100px auto;
position: relative;
overflow: hidden;
border: solid 3px #000;
border-bottom: none;
text-align: center;
}
div:before,
div:after {
content: '';
display: block;
height: 100%;
width: 200%;
transform: rotate(20deg);
box-shadow: 46px 0 0 3px #000;
position: absolute;
top: 1px;
right: -120%;
}
div:after {
transform: rotate(-20deg);
left: -120%;
box-shadow: -46px 0 0 3px #000;
}
<div>Test</div>
Setting background: #fff seems to fix the issue. Apply z-index: -1 too, so that the content isn't covered by the :before and :after now that they're not transparent.
div {
height: 100px;
width: 100px;
margin: 100px auto;
position: relative;
overflow: hidden;
border: solid 3px #000;
border-bottom: none;
text-align: center;
}
div:before,
div:after {
content: '';
display: block;
height: 100%;
width: 200%;
transform: rotate(20deg);
box-shadow: 46px 0 0 3px #000;
position: absolute;
top: 1px;
right: -120%;
/* Setting the background
covers the "dotted line" */
background: #fff;
/* It also covers the content
so we need to move it underneath
with z-index */
z-index: -1;
}
div:after {
transform: rotate(-20deg);
left: -120%;
box-shadow: -46px 0 0 3px #000;
}
<div>Test</div>
Related
The screenshot attached explains everything about the desired effect. I was thinking to decrease the border width from 4px to 3px to 2px , I don't want to apply ease-in/ease out effect. As of now, when I hover, it looks like this. I want to change this box through the effect displayed in the first screenshot.
For reference,
I am posting the code below:
&__link {
#include font-text(default, menuitem);
#include token(font-size, sidenav, default);
background-image: none;
text-transform: uppercase;
padding: 1rem;
margin: 0;
&:before {
position: absolute;
right: 1.3rem;
top: 2rem;
width: 1px;
content: '';
background: #fff;
height: 100%;
opacity: 0.3;
}
&:after {
display: inline-block;
vertical-align: middle;
position: relative;
content: '';
width: 10px;
height: 10px;
outline: 1px solid #fff;
top: -1px;
}
&:hover {
#include font-text(default, menuitem);
#include token(font-size, sidenav, hover);
font-weight: 600;
margin: 0;
padding: 1rem;
&:after {
background: white;
box-shadow: 0 0 10px 1px rgba(255, 255, 255, 1);
}
}
}
&:after represents the code for the box. Thanks in advance.
<div class="box">
</div>
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 200px;
width: 200px;
text-decoration: none;
background-color: white;
background-image: linear-gradient(#000, #000);
border: 1px solid black;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 0% 0%;
transition: .5s;
}
.box:hover {
background-size: 95% 95%;
}
Didnt understand the question too well but this does the attached screenshot animation
Try it - you need to set animations, bcz you want several situations for single event (hover)
Replace these blocks
&:after {
display: inline-block;
vertical-align: middle;
position: relative;
content: '';
width: 0px;
height: 0px;
top: -1px;
background: white;
border: 7px solid #fff;
}
&:hover:after {
animation: sqr .3s linear;
animation-fill-mode: forwards;
}
#keyframes sqr {
30%{
border: 5.5px solid #fff;
width: 3px; height: 3px;
background: black;
}
80%{
border: 4px solid #fff;
width: 6px;
height: 6px;
background: black;
}
100%{
border: 3px solid #fff;
width: 8px;
height: 8px;
transform: scale(1.5);
box-shadow: 0 0 5px 2px #fff;
background: black;
}
}
I have code that looks like:
.bubble {
background-color: white;
border-radius: 12px;
border: 1.3px solid black;
width: 90%;
max-width: 800px;
padding: 8px 12px;
position: relative;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
text-align: justify;
word-break: break-word;
hyphens: auto;
}
.tail {
position: absolute;
overflow: hidden;
top: 12px;
left: -10px;
height: 12px;
width: 10px;
}
.tail::after {
background: #ffffff;
border: 1.3px solid black;
content: '';
height: 100%;
position: absolute;
right: -6px;
top: -9px;
transform-origin: 0 100%;
transform: rotate(47deg);
width: 100%;
}
<div class='bubble'>
<div class='tail'></div>
Hi!
</div>
<style>
However, on MacOS Chrome there is a thin line in place of the border where there shouldn't be any line at all. Why is that happening and how can I remove it? Thanks!!
I have an element with a known ID I can target. How could I create a bestseller-badge like this with css only? I cannot change the html.
I know how to create this but only if I could edit the html, which I cannot:
.box {
width: 200px; height: 300px;
position: relative;
border: 1px solid #BBB;
background: #EEE;
}
.ribbon {
position: absolute;
right: -5px; top: -5px;
z-index: 1;
overflow: hidden;
width: 75px; height: 75px;
text-align: right;
}
.ribbon span {
font-size: 10px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 100px;
display: block;
background: #79A70A;
background: linear-gradient(#9BC90D 0%, #79A70A 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px; right: -21px;
}
.ribbon span::before {
content: "";
position: absolute; left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid #79A70A;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #79A70A;
}
.ribbon span::after {
content: "";
position: absolute; right: 0px; top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid #79A70A;
border-bottom: 3px solid transparent;
border-top: 3px solid #79A70A;
}
<div class="box">
<div class="ribbon"><span>Bestseller</span></div>
</div>
The thing is I only have the parent box and not the ribbon inside. I cant input html.
Because in pseudo elements you can't put any html markup, you need to get clever with just using simple shapes and combining them together. Additionally, you can't have multiple :after pseudo elements, so we are limited to just two shapes (one for :after and one for :before). The one in :after could be the bestseller front of the badge, with text. The trickiest part was to get the clip-path: polygon(...points) to get right so that we get the effect of trimmed ribbon. Fortunately, Firefox dev tools have a nifty polygon modification tool that was very helpful. Getting the two little corners that make the "wrap around" effect was a bit trickier, but putting it in a :before pseudo element with z-index: -1 and a little hand-tweaked offset did the trick. The end effect is below:
.box {
width: 200px; height: 300px;
position: relative;
border: 1px solid #BBB;
background: #EEE;
margin: 20px;
display: inline-block;
}
.bestseller:before {
content: "";
z-index: -1;
overflow: hidden;
transform: rotate(-135deg);
width: 120px;
display: block;
background: #79A70A;
background: linear-gradient(#9BC90D 0%, #79A70A 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 34px;
right: -16px;
clip-path: polygon(120px 20px, 90px -10px, 30px -10px, 0px 20px, 10px 30px, 110px 30px);
height: 20px;
width: 120px;
}
.bestseller:after {
content: "bestseller";
z-index: 1;
overflow: hidden;
font-size: 10px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(45deg);
width: 120px;
display: block;
background: #79A70A;
background: linear-gradient(#9BC90D 0%, #79A70A 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 20px; right: -30px;
clip-path: polygon(120px 20px, 90px -10px, 30px -10px, 0px 20px, 10px 30px, 110px 30px)
}
<div class="box">
</div>
<div class="box bestseller">
</div>
With the help of only CSS using pseudo class, we cannot create exactly the same but similar to that is possible. Add the id "ribbon" to div with class "box" and try with the below css. Increment/decrement the height, top right, etc based on the size of your div.
#ribbon:before {
content: "";
width: 60px;
display: block;
position: absolute;
top: 14px;
right: -28px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid green;
height: 0;
}
#ribbon:after {
content: "Bestseller";
font-size: 10px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 30px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 60px;
display: block;
position: absolute;
top: 14px;
right: 2px;
height: 30px;
}
Instead of trying with border for the background color of ribbon, you can also try using an ribbon image as background and use the text on top of it.
I'm trying to design a button using only CSS, and no images. The issue is with the bottom-left and top-right corners, and I'm using a background-color to achieve this when the button is on a solid background color. The issue is when the background is not a solid color and you can see the corners, like in the demo below.
So, I'd like to come up with a universal way to code this button with just CSS and no images.
Thanks!
Here is a demo of the button →
Here is the HTML I have in my demo:
<div id="banner">
<div id="button-box">
<a class="btn-cornered btn-cornered-dark-bg" href="#"><span>Learn More</span></a>
</div>
</div>
And the CSS:
#banner {
background: url('https://d3vv6lp55qjaqc.cloudfront.net/items/2D1R0A0B1q031R1C2P26/Image%202017-11-07%20at%201.57.17%20PM.png?X-CloudApp-Visitor-Id=8b9380dd59b56afec49e5f1e289c6692&v=53edcac2') no-repeat center -420px;
background-size: cover;
display: block;
width: 100%;
height: 200px;
text-align: center;
}
#button-box {
padding: 50px 0;
}
/* Button */
.btn-cornered {
padding-left: 20px;
padding-right: 20px;
position: relative;
display: inline-block;
line-height: 53px;
text-align: center;
color: #fff;
font-size: 24px;
border: 1px solid #fff;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
text-decoration: none;
}
.btn-cornered:before {
position: absolute;
left: -1px;
bottom: -1px;
content: "";
border-bottom: 11px solid #fff;
border-right: 11px solid transparent;
}
.btn-cornered:after {
position: absolute;
left: -2px;
bottom: -2px;
content: "";
border-bottom: 11px solid;
border-right: 11px solid transparent;
}
.btn-cornered span {
top: -2px;
left: -1px;
position: relative;
padding-right: 20px;
display: block;
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.btn-cornered span:before {
position: absolute;
content: "";
border-bottom: 11px solid transparent;
border-right: 11px solid #fff;
}
.btn-cornered span:after {
position: absolute;
content: "";
border-bottom: 11px solid transparent;
border-right: 11px solid;
}
/* Dark Background Styles */
.btn-cornered-dark-bg {
height: 53px;
}
.btn-cornered-dark-bg:after {
border-bottom-color: #000000;
}
.btn-cornered-dark-bg span {
max-width: none;
line-height: 58px;
font-size: 24px;
height: 53px;
width: calc(100% + 2px);
}
.btn-cornered-dark-bg span:before {
right: 1px;
top: 1px;
}
.btn-cornered-dark-bg span:after {
border-right-color: #000;
right: 0px;
top: 0px;
}
Here's an example using pseudo elements and an extra span that is skewed to make the angled corners. The trick is hiding the overflow on the button and, with a little finesse, correctly lining up the skewed borders from the span.
I'm not fully satisfied as it requires the extra span and seems a bit fragile when changing font sizes, but here it is:
*, *:before, *:after {
box-sizing: border-box;
}
body {
background: steelblue;
}
button {
background: transparent;
padding: 10px 20px;
position: relative;
border: none;
margin: 20px;
overflow: hidden;
color: white;
}
button::before {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 15px;
right: 15px;
content: '';
border-left: 1px solid white;
border-top: 1px solid white;
}
button::after {
display: block;
position: absolute;
bottom: 0;
right: 0;
top: 15px;
left: 15px;
content: '';
border-right: 1px solid white;
border-bottom: 1px solid white;
}
button span {
display: block;
position: absolute;
z-index: -1;
top: 0;
right: -18px;
bottom: 0;
left: 15px;
border: 1px solid white;
transform: skew(45deg);
transform-origin: bottom left;
}
<button>
<span></span>
Sign up & Stay Connected
</button>
Clip-path solution
It is done by pseudo element after which is clipped using css3 clip-path to desired shape. However, clip-path is not supported by IE and Edge (Can I use). It can be little tricky to change values in clip-path to get desired width of border and length of "cutted triangle" so I create little script for that - Codepen
a {
position: relative;
padding: 8px 20px;
}
a::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
-webkit-clip-path: polygon(calc(100% - 2px) 11px, calc(100% - 2px) 100%, 100% 100%, 100% 10px, calc(100% - 10px) 0, 0% 0%, 0% calc(100% - 10px), 10px 100%, 100% 100%, 100% calc(100% - 2px), 11px calc(100% - 2px), 2px calc(100% - 11px), 2px 2px, calc(100% - 11px) 2px);
clip-path: polygon(calc(100% - 2px) 11px, calc(100% - 2px) 100%, 100% 100%, 100% 10px, calc(100% - 10px) 0, 0% 0%, 0% calc(100% - 10px), 10px 100%, 100% 100%, 100% calc(100% - 2px), 11px calc(100% - 2px), 2px calc(100% - 11px), 2px 2px, calc(100% - 11px) 2px);
}
Text Here
Demo - JS Bin
Thanks everyone for your solutions and suggestions. For what it's worth, this is the solution I came up.
CSS:
.abutton {
overflow: hidden;
position: relative;
z-index: 1;
padding: 10px 20px;
border: none;
background: transparent;
text-align: center;
line-height: 1;
font-size: 24px;
color: #fff;
display: inline-block;
text-decoration: none;
}
.abutton:before {
content: '';
display: block;
position: absolute;
top: 0;
right: 8px;
bottom: 8px;
left: 0;
border-left: 1px solid #ffffff;
}
.abutton:after {
content: '';
display: block;
position: absolute;
top: 8px;
right: 0;
bottom: 0;
left: 15px;
border-right: 1px solid #ffffff;
}
.abutton span {
width: 100%;
height: 100%;
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
}
.abutton span:before,.abutton span:after {
content: '';
width: 100%;
height: 100%;
display: block;
position: absolute;
-webkit-transform: skew(45deg);
transform: skew(45deg);
}
.abutton span:before {
left: 8px;
bottom: 0;
border-bottom: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
.abutton span:after {
top: 0;
right: 8px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform-origin: top right;
transform-origin: top right;
}
footer .abutton {
font-size: 21px;
}
.abutton:hover {
color: #666;
}
.abutton:hover span:before,.abutton:hover span:after {
background-color: #fff;
}
#button-frame {
background: #666;
min-height: 200px;
padding: 20px;
}
HTML:
<div id="button-frame">
<a class="abutton" href="#"><span></span>Learn More</a>
</div>
I was experimenting some fancy CSS effects before apply to an ongoing application and I came across Ribbons.
By itself, it works perfectly but I wouldn't use a fixed element as suggested by the generator so I added an image to the main box
However, the images of the application in which I would be adding this feature are not of the same size yet, so I decided to change the old <img>for CSS background images and then make use of background-size property.
But sometimes the background image is overflowing the dimensions of box. It would be just a matter of add an overflow: hidden in #preview and everything would be solved, but if I do that the "curves" of the Ribbon disappear.
How could I change that? Here's the current test code, although for some reason the background is not loading, not in here nor in JSFiddle.
#preview {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 3px solid #000;
display: block;
/*overflow: hidden;*/
perspective: 1000px;
position: relative;
height: 260px;
width: 365px;
}
.front {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
background-image: url( 'https://photos.smugmug.com/Dog-Shows/BTB-September2013-Sunday/BTB-UKC-Alaskan-Klee-Kai/i-xFmLHS8/0/S/889_MG_6212a-889-S.jpg' );
}
.ribbon {
position: absolute;
left: -5px; top: -5px;
z-index: 1;
overflow: hidden;
width: 75px; height: 75px;
text-align: right;
}
.ribbon span {
font-size: 10px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
width: 100px;
display: block;
background: #79A70A;
background: linear-gradient(#F70505 0%, #8F0808 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px; left: -21px;
}
.ribbon span::before {
content: "";
position: absolute; left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid #8F0808;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #8F0808;
}
.ribbon span::after {
content: "";
position: absolute; right: 0px; top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid #8F0808;
border-bottom: 3px solid transparent;
border-top: 3px solid #8F0808;
}
<div id="preview">
<div class="ribbon">
<span>POPULAR</span>
</div>
<div class="front"></div>
</div>
The image goes to .front because I also intend to use David Walsh's Card Fliping technique, which is already working in parallel and I believe is not relevant to the case.
Even setting background-size to containmade the image overflow, but this value is not desirable as it won't cover like the currentlt defined value.
.front is just a text container. you need to apply background image to #preview
#preview {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 3px solid #000;
display: block;
/*overflow: hidden;*/
perspective: 1000px;
position: relative;
height: 260px;
width: 365px;
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
background-image: url( 'https://photos.smugmug.com/Dog-Shows/BTB-September2013-Sunday/BTB-UKC-Alaskan-Klee-Kai/i-xFmLHS8/0/S/889_MG_6212a-889-S.jpg' );
}
.front {
color: white;
}
.ribbon {
position: absolute;
left: -5px; top: -5px;
z-index: 1;
overflow: hidden;
width: 75px; height: 75px;
text-align: right;
}
.ribbon span {
font-size: 10px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
width: 100px;
display: block;
background: #79A70A;
background: linear-gradient(#F70505 0%, #8F0808 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px; left: -21px;
}
.ribbon span::before {
content: "";
position: absolute; left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid #8F0808;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #8F0808;
}
.ribbon span::after {
content: "";
position: absolute; right: 0px; top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid #8F0808;
border-bottom: 3px solid transparent;
border-top: 3px solid #8F0808;
}
<div id="preview">
<div class="ribbon">
<span>POPULAR</span>
</div>
<div class="front">FRONT DIV Lorem ipsum la-la-la</div>
</div>
Or you need to define width and height for .front:
#preview {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 3px solid #000;
display: block;
/*overflow: hidden;*/
perspective: 1000px;
position: relative;
height: 260px;
width: 365px;
}
.front {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
background-image: url( 'https://photos.smugmug.com/Dog-Shows/BTB-September2013-Sunday/BTB-UKC-Alaskan-Klee-Kai/i-xFmLHS8/0/S/889_MG_6212a-889-S.jpg' );
height: 260px;
width: 365px;
}
.ribbon {
position: absolute;
left: -8px; top: -8px;
z-index: 1;
overflow: hidden;
width: 75px; height: 75px;
text-align: right;
}
.ribbon span {
font-size: 10px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
width: 100px;
display: block;
background: #79A70A;
background: linear-gradient(#F70505 0%, #8F0808 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px; left: -21px;
}
.ribbon span::before {
content: "";
position: absolute; left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid #8F0808;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #8F0808;
}
.ribbon span::after {
content: "";
position: absolute; right: 0px; top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid #8F0808;
border-bottom: 3px solid transparent;
border-top: 3px solid #8F0808;
}
<div id="preview">
<div class="ribbon">
<span>POPULAR</span>
</div>
<div class="front"></div>
</div>