I draw this shape my web site , I don't know if any shape in this page can be edited to look like the shape I need.
this is about what you need, but it might need to be adjusted a little:
.title{
background-color: #000;
height: 70px;
line-height:70px;
font-size:30px;
width:200px;
text-align: center;
color: #fff;
margin-left: 100px;
margin-top: 20px;
padding-right:30px;
position: relative;
box-shadow: -20px -7px 0 yellow;
}
.title:after, .title:before{
content: "";
position: absolute;
left: -70px;
top: 0;
border-color: #000 #000 transparent transparent;
border-style: solid;
border-width: 35px;
z-index:2;
}
.title:after{
border-color: yellow yellow transparent transparent;
z-index:1;
left: -90px;
top: -7px;
}
<div class="title">
Coin blanks
</div>
Related
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 create an 'easy' button shape with css pseudeo :after/:before class.
I've read some blogs and articles about that, but no shape looked like mine. So I tried it on my own. But this I something, I can't figure out.
button{
height: 50px;
width: 250px;
border: solid 2px #000;
border-bottom: none;
background: orange;
}
button:after{
height: 0;
width: 125px;
content:"";
position: absolute;
border-top: transparent 30px
border-right: solid 2px #000;
}
button:before{
height: 0;
width: 125px;
content:"";
position: absolute;
border-top: transparent 30px
border-left: solid 2px #000;
}
<button>Let's do it</button>
Can someone give me a hint?
You can create this with :before and :after pseudo elements one for border and other one above for orange background.
button {
height: 50px;
width: 250px;
border: solid 2px #000;
border-bottom: none;
background: orange;
position: relative;
}
button:after,
button:before {
border-style: solid;
border-width: 50px 110px 0 140px;
border-color: #FFA500 transparent transparent transparent;
content: '';
position: absolute;
left: -2px;
top: 100%;
}
button:after {
transform: translateY(-1px);
}
button:before {
border-color: black transparent transparent transparent;
}
<button>Let's do it</button>
Not exactly the same size but you can play with the following one:
#pentagon {
margin-top: 45px;
position: relative;
width: 250px;
border-width: 70px 0 0;
border-style: solid;
border-color: orange transparent;
}
#pentagon:after {
content: "";
position: absolute;
height: 0;
width: 0;
top: -30px;
left: 0px;
border-width: 50px 125px 0 125px;
border-style: solid;
border-color: orange white;
}
<div id="pentagon"></div>
You could play with this, it has a border like your image http://www.cssarrowplease.com/
I am trying to create an element using Bootstrap that looks like this image
This is the screen shot of how far I have gone
I have never worked on pseudo classes and am finding it very difficult to get the exact shape. Please take a look at my code and help me figure it out. I have included only the second (thee one on the right side in the screenshot) clipboard's code here.
HTML
<div class="col-xs-12 col-sm-6">
<div class="clip">
<div class="circle"></div>
</div>
<div class="pad">
<div class="paper"></div>
</div>
</div>
CSS
.clip, .circle{
position: relative;
}
.clip::after, .clip::before, circle:after, .circle:before{
display: block;
position: absolute;
content: "";
z-index: 50;
}
.clip:before{
top: 12.5px;
left: 15%;
width: 70%;
border-bottom: solid 50px grey;
border-left: solid 150px transparent;
border-right: solid 150px transparent;
}
.clip:after{
top: 60px;
left: 15%;
width: 70%;
border-bottom: solid 55px grey;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.circle:before{
top: 10px;
left: 70%;
width: 20%;
height: 50px;
border-radius: 50%;
border-right: solid 150px yellow;
}
because there is no SVG tag, i'll go with pseudo & gradient :
div {
position:relative;
float:left;
margin:60px 60px 80px;
width:180px;
height:200px;
border-radius:15px;
background:white;
box-shadow:/* draw inside part of border */0 0 0 20px #159E91, inset -1px -1px 1px;
}
div:before {/*to draw outside part of border with same radius inside/out */
z-index:-1;
border-radius:20px;
content:'';
border: 20px solid #159E91;
position:absolute;
top:-30px;
left:-30px;
right:-30px;
bottom:-30px;
box-shadow:0 -2px 2px rgba(30, 162, 149, 0.2), 0 0 2px white, 0 5px 5px -3px rgba(0,0,0,0.5)
}
div:after {/* draw gradient underneath clipper */
content:'';
position:absolute;
top:0;
border-radius: 0 15px 0 0;
left:26px;
width:152px;
height:150px;
background:
linear-gradient(45deg, white 40%, rgba(255,255,255,0) 40% ),/* mask*/
linear-gradient(-45deg, white , transparent 70%),/* mask*/
linear-gradient(to right , rgba(0,0,0,0.25) , rgba(0,0,0,0.15)),transparent ;
}
.clipper {/* hold clipper shape actually */
display:block;
width:128px;
height:80px;
margin: -52px auto 30px;
position:relative;
z-index:1;
overflow:hidden;
}
.clipper b {/* show the clipper shape */
border-radius:35px;
position:absolute;
height:150%;
width:100%;
box-shadow: 0 0 1px 1px gray;
left:50%;
top:-12px;
transform-origin:0 0;
transform:rotate(45deg);
overflow:hidden;
}
.clipper b:before {/* draw the hoe and paint around it */
content:'';
display:block;
border-radius:100%;
height:29px;
width:29px;
margin:20px;
box-shadow:inset -1px -1px 1px gray, 0 0 0 100px #3B3B3B, inset 1px 1px 2px rgba(0,0,0,0.5);
}
/* to match fake picture's text */
.clipper ~ span {
display:block;
background:#353535;
margin:10px 58px;
padding:5px;
position:relative;
z-index:1;
}
.clipper ~ span:last-of-type {
display:block;
background:#353535;
margin:10px 85px 10px 58px;
}
<div>
<span class="clipper"><b></b></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
but that's really much CSS for just a shape, where an image or an SVG would do fine for the design.
You can play with it here : http://codepen.io/gc-nomade/pen/rLYYZx
https://jsfiddle.net/ahe128/esmrLzuv/5/
i did something but this is realy hard work i will try complete this :)
.clip,
.circle {
position: relative;
}
.clip::after,
.clip::before,
circle:after,
.circle:before {
display: block;
position: absolute;
content: "";
z-index: 50;
}
.clip:before {
top: 1rem;
left: 10%;
width: 20%;
border-bottom: solid 50px grey;
border-left: solid 150px transparent;
border-right: solid 150px transparent;
}
.clip:after {
top: 4.65rem;
left: 10%;
right:10%;
width: 82%;
border-bottom: solid 4.3rem grey;
border-top-left-radius: 0.8rem;
border-top-right-radius: 0.8rem;
border-bottom-left-radius: 0.4rem;
border-bottom-right-radius: 0.4rem;
}
.circle:before {
top: 0.78rem;
height: 1px;
width:1px;
border-radius: 50%;
border: solid 25px white;
z-index:100;
left:47%
}
Finally.......I got it working (except the diagonal gradient). But it's not responsive yet. My aim is to keep each Clipboard's design intact and stack them one below the other in small screens. Can someone please point out where I'm missing it !!
Also, if there's a better way of doing it in Pure CSS then I'd love to see it.
Fiddle: https://jsfiddle.net/chandannadig/esmrLzuv/7/
/*Clip*/
.clip, .circle{
position: relative;
}
.clip::after, .clip::before, circle:after, .circle:before{
display: block;
position: absolute;
content: "";
}
.clip:before{
z-index: 50;
top: 1rem;
left: 6.958rem;
width: 29rem;
border-bottom: solid 4rem grey;
border-left: solid 11.5rem transparent;
border-right: solid 11.5rem transparent;
}
.clip:after{
top: 4.7rem;
left: 6.958rem;
width: 29rem;
z-index: 50;
border-bottom: solid 4rem grey;
border-top-left-radius: 0.8rem;
border-top-right-radius: 0.8rem;
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}
.circle{
position: absolute;
z-index: 60;
top: 0.4rem;
left: 15.6rem;
width: 12rem;
height: 8rem;
background: grey;
border-radius: 50%;
}
.circle::before{
z-index: 60;
top: 1rem;
left: 4.2rem;
width: 3.5rem;
height: 3.5rem;
background: white;
border-radius: 50%;
}
/*End of Clip*/
I want to add a label on some of my elements on a website and design for a label that is a flag with an inverted V-shaped cut at the bottom.
So far I have this:
HTML
<div class="css-shapes"></div>
CSS
.css-shapes{
border-left: 99px solid #f00fff;
border-right: 99px solid #f00fff;
border-bottom: 39px solid transparent;
}
http://jsfiddle.net/yhexkm4u/2/
However, I need the background to be white and border around this shape in purple and 1px. I was trying to fit the same shape just in white inside of this one, but everything got messy and didn't go as expected.
Maybe it is a wrong approach, but I want to end up with labels that would look something like this:
With CSS:
You can use CSS transforms on pseudo elements to create the background with a transparent inverted triangle at the bottom:
body{background:url('http://lorempixel.com/image_output/food-q-c-640-480-1.jpg');background-size:cover;}
p{
position: relative;
width: 150px; height: 150px;
overflow: hidden;
border-top:3px solid #EF0EFE;
}
p:before, p:after{
content: '';
position: absolute;
top: -3px;
height: 100%; width: 50%;
z-index: -1;
border:2px solid #EF0EFE;
box-sizing:border-box;
}
p:before{
left: 0;
transform-origin: 0 0;
transform: skewY(-20deg);
border-width:0 0 4px 3px;
}
p:after{
right: 0;
transform-origin: 100% 0;
transform: skewY(20deg);
border-width:0 3px 4px 0;
}
<p>Some text ... </p>
Note that you will need to add vendor prefixes on the transform and transform-origin properties to maximize browser support. See canIuse for more information.
With SVG
Another approach is to use an inline SVG with the polygon element:
body{background: url('http://lorempixel.com/image_output/food-q-c-640-480-1.jpg');background-size: cover;}
div{position: relative;width: 100px; height: 150px;}
svg{position: absolute;width: 100%;height: 100%;z-index: -1;}
<div>
<svg viewbox="-1.5 -1.5 103 153">
<polygon points="100 0, 100 100, 50 85, 0 100, 0 0" fill="transparent" stroke-width="3" stroke="#ef0efe"/>
</svg>
<p>Some text ... </p>
</div>
Here is a slightly different method using pseudo-elements and transform rotations to create an outlined banner like this:
This angled shape is created with position: absolute pseudo-elements, :before and :after:
The excess is cut off with overflow: hidden on the parent to form our banner:
The outline is created with box-shadow and the two angles are prevented from overlapping by pulling / pushing the x-axis by 46px — box-shadow: 46px 0 0 3px #000
Full Example
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>Text</div>
STOLEN FROM CSS-SHAPES
#flag {
width: 110px;
height: 56px;
padding-top: 15px;
position: relative;
background: red;
color: white;
font-size: 11px;
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
}
#flag:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-bottom: 13px solid #eee;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
}
DEMO:
#flag {
width: 110px;
height: 56px;
padding-top: 15px;
position: relative;
background: red;
color: white;
font-size: 11px;
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
}
#flag:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-bottom: 13px solid #eee;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
}
<div id="flag"></div>
My Approach
My approach uses skewed elements, and allows you to quickly position them to your needs.
div {
height: 100px;
width: 100px;
position: relative;
border-left: 10px solid tomato;
border-top: 10px solid tomato;
border-right: 10px solid tomato;
text-align: center;
line-height: 100px;
font-size: 30px;
}
div:before {
content: "";
position: absolute;
height: 50%;
width: 50%;
left: -10px; /*width of border*/
bottom: -30px;
z-index: -2;
-webkit-transform: skewY(-20deg);
transform: skewY(-20deg);
border-bottom: 10px solid tomato;
border-left: 10px solid tomato;
}
div:after {
content: "";
position: absolute;
height: 50%;
width: 50%;
right: -10px; /*width of border*/
bottom: -30px;
z-index: -2;
-webkit-transform: skewY(20deg);
transform: skewY(20deg);
border-bottom: 10px solid tomato;
border-right: 10px solid tomato;
}
div:hover, div:hover:before, div:hover:after{
background:lightgray;
}
<div>TEXT</div>
I've had a go at updating your CSS to create the effect you want:
.css-shapes {
height: 250px;
width: 0px;
border-left: 99px solid #f00fff;
border-right: 99px solid #f00fff;
border-bottom: 39px solid transparent;
position: relative
}
.n-shape {
height: 248px;
width: 0px;
border-left: 95px solid #ffffff;
border-right: 95px solid #ffffff;
border-bottom: 39px solid transparent;
position: absolute;
top: -6px;
right: -95px;
}
.top {
position: absolute;
top: 0px;
width: 198px;
height: 2px;
background-color: #f00fff;
left: -99px;
border-bottom: 1px solid #f00fff;
}
<div class="css-shapes">
<div class="n-shape"></div>
<div class="top"></div>
</div>
Fiddle: http://jsfiddle.net/dywhjwna/
Here is what I came up with.
Link Fiddle
It correspond to what you were looking for however I guess there should be a "better way" to it rather than playing with border.
HTML
<div id="text-div">
Text
</div>
<div id="pacman">
<div id="left-triangle"></div>
<div id="right-triangle"></div>
</div>
CSS
#text-div {
width: 118px;
height: 60px;
text-align: center;
border: 1px solid purple;
border-bottom: 0px;
line-height: 60px;
}
#pacman {
width: 0px;
height: 0px;
border-right: 60px solid purple;
border-top: 0px;
border-left: 60px solid purple;
border-bottom: 60px solid transparent;
}
#left-triangle{
position: relative;
left: -59px;
border-right: 58px solid transparent;
border-top: 0px;
border-left: 58px solid white;
border-bottom: 58px solid transparent;
}
#right-triangle{
position: relative;
top: -59px;
left: -57px;
border-right: 58px solid white;
border-top: 0px;
border-left: 58px solid transparent;
border-bottom: 58px solid transparent;
}
A quick workaround is to rotate it:
transform: rotate(90deg);
Fiddle
Another solution would be an SVG path, here's a fiddle!.
A better solution with text easily positioned in the middle, using a rectangle background and a triangle at the bottom.
.css-shapes{
position: relative;
height: 250px;
width: 150px;
background: #FFD05B;
color: #fff;
text-align: center;
line-height:225px;
font-size: 90px;
box-sizing: border-box;
}
.css-shapes:after{
content: '';
position:absolute;
left:0;
bottom: 0;
display: block;
width: 100%;
height:50px;
border-bottom: 25px solid #fff;
border-left: 75px solid transparent;
border-right: 75px solid transparent;
box-sizing: border-box;
}
<div class="css-shapes">1</div>
I'm trying to make a "priority marker" in css. I have a couple of issues. First: the text is not centered reasonably at all. Second: I'd prefer the width (at least) to change dynamically with the length of the text. Is either doable?
result:
My understanding of how to pick a font that fits with in this context is beyond my current css skills. If this has been done I don't really care to reinvent this...
.box {
border-color: orange;
border-style: solid;
text-align: center;
border-width: 1px 0px 1px 1px;
margin: 0px 8px 0px 0px;
background-color: yellow;
padding-right: 8px;
position: relative;
height:14px;
width:20px;
}
.arrow {
border-color: transparent transparent transparent orange;
border-style: solid;
border-width: 8px;
position: absolute;
right: -15px;
bottom: -1px;
height:0;
width:0;
}
.arrow2 {
border-color: transparent transparent transparent yellow;
border-style: solid;
border-width: 7px;
position: absolute;
right: -12px;
bottom: 0px;
height:0;
width:0;
}
<div class="{style.box}">42
<div class="{style.arrow}"></div>
<div class="{style.arrow2}"></div>
</div>
Add this to .box:
font-size:12px;
font-family:serif;
display:inline-block;
padding-left:5px;
And remove its width rule.