I have the following button on my site:
http://jsfiddle.net/32u5x5uf/
I'd first like to move the span circle to be exactly in the center of the main button. I'd then like if I can somehow "merge" the two shapes together in CSS. So basically remove the top half of the circle and the main bar that cuts through the middle of the circle.
.full-circle {
border: 2px solid #1588CB;
height: 35px;
width: 35px;
-moz-border-radius:30px;
-webkit-border-radius: 30px;
position:absolute;
bottom:-20px;
}
button {
background:#ffffff;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 2px solid #1588CB;
color:#1588CB;
font-weight:400;
height:200px;
width:400px;
position:relative;
}
<button>Learn More
<span class="full-circle">+</span>
</button>
.full-circle {
border: 2px solid #1588CB;
height: 35px;
width: 35px;
-moz-border-radius:30px;
-webkit-border-radius: 30px;
position:absolute;
bottom:-20px;
}
button {
background:#ffffff;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 2px solid #1588CB;
color:#1588CB;
font-weight:400;
height:200px;
width:400px;
position:relative;
}
/* overides ... */
.full-circle {
border-radius: 0 0 30px 30px;
border-top: none;
height: 17px;
background: #FFF;
left: 50%;
margin-left: -17px;
bottom: -19px;
line-height: 0;
}
<button>Learn More
<span class="full-circle">+</span>
</button>
The Answer above by Turnip is actually kind of a cheat with same
background-color
If that's not the case then you should go with this:
div {
background-color: #80C5A0;
width: 200px;
height: 100px;
border-radius: 50% / 100%;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
<div></div>
Related
I have this code:
How can I make it have that arrow thing at the top:
like this:
so it can look like a popup?
Here is the styling for it:
.div-cancel{
background-color: #FAFAFA;
width:200px;
display:none;
height:85px;
font-size:15px;
padding-top:18px;
padding-left:10px;
padding-right:10px
}
<div class="div-cancel" id="cancel101" >
<span><span style="background-color: #FAAB20;"><i class="fa fa-exclamation" style="width:25px;color:white"></i></span>
Please type in 'CANCEL' to cancel subscription. </span>
</div>
Here is the demo.
The Css solution is:
.div-cancel {
background-color: #1E2021;
width:200px;
display:block;
height:85px;
font-size:15px;
padding-top:18px;
padding-left:10px;
padding-right:10px;
position: relative;
color: #ababab;
}
.div-cancel:before {
position: absolute;
content: '';
width: 0;
height: 0;
border: 6px solid transparent;
border-bottom-color: #1E2021;
left: 10px;
top: -12px;
}
You can use this CSS with the unchanged HTML shown in the question.
If you want a border around your arrow, using transform on the ::before pseudo element and some positioning, can get the affect that you want without any added markup. Just make sure div-cancel has it's position set to relative.
.div-cancel {
position: relative;
margin-top: 20px;
background-color: #FAFAFA;
width: 200px;
height: 85px;
font-size: 15px;
padding-top: 18px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid grey;
}
.div-cancel::before {
position: absolute;
top: -4px;
left: 5px;
width: 5px;
height: 5px;
border: 1px solid grey;
border-bottom: 0;
border-right: 0;
background: #fff;
transform: rotate(45deg);
content: '';
}
<div class="div-cancel" id="cancel101">
<span>
<span style="background-color: #FAAB20;">
<i class="fa fa-exclamation" style="width:25px;color:white"></i>
</span> Please type in 'CANCEL' to cancel subscription.
</span>
</div>
I guess the title is kind of hard to understand, so I'll explain.
I am trying to achieve this effect (from .png file):
This is half a cycle with black line inside
I couldn't create this inner line no matter how I tried.
This is what I got so far:
HTML
<div id='halfCycle'>
<div id='halfCycleInner'>
</div>
</div>
CSS
#halfCycle
{
width: 23px;
height: 43px;
background-color: #383838;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
box-shadow: 2px 0 2px 0px #222;
}
#halfCycleInner
{
position: relative;
top: 1px;
right:0px;
width: 22px;
height: 41px;
background-color: #383838;
border-top-right-radius: 60px;
border-bottom-right-radius: 60px;
border-right-width: 1px;
border-right-color: #212121;
border-right-style: solid;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
Here is a DEMO
It's very close, but not the same.
Any idea how to make this inner line.
You could use a pseudo element to and give it the border :
DEMO
HTML :
<div id='halfCycle'></div>
CSS :
#halfCycle
{
width: 23px;
height: 43px;
background-color: #383838;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
box-shadow: 2px 0 2px 0px #222;
position:relative;
overflow:hidden;
}
#halfCycle:after{
content:'';
position:absolute;
top:1px; right:1px;
width:42px;
height:39px;
border-radius:100%;
border:1px solid #000;
}
there is a solution i hope it will work for you.
DEMO
.halfCycle{
background: #383838;
height: 42px;
width: 20px;
border:1px solid #202020;
border-radius: 0 60px 60px 0;
border-left: none;
position: relative;
box-shadow:5px 0px 5px 0px #222;
}
.halfCycle:after{
content: '';border:1px solid #383838;
position: absolute;
height: 44px;
width: 21px;
left:0;
top:-2px;
border-radius: 0 60px 60px 0;
border-left:none;
}
So I've found this answer - CSS3 menu shape, style but have no idea on how to put it on the left side. I've searched for it already but with no luck.
This is what I'm trying to achieve:
And I've found this one also - Change the shape of the triangle. How can I make it work on the opposite side? I mean the arrow needs to be on the left side. And is it possible to do this with one div?
Want one that you can put over any background color?
jsBin demo
Only this HTML:
<span class="pricetag"></span>
And this CSS:
.pricetag{
white-space:nowrap;
position:relative;
margin:0 5px 0 10px;
displaY:inline-block;
height:25px;
border-radius: 0 5px 5px 0;
padding: 0 25px 0 15px;
background:#E8EDF0;
border: 0 solid #C7D2D4;
border-top-width:1px;
border-bottom-width:1px;
color:#999;
line-height:23px;
}
.pricetag:after{
position:absolute;
right:0;
margin:1px 7px;
font-weight:bold;
font-size:19px;
content:"\00D7";
}
.pricetag:before{
position:absolute;
content:"\25CF";
color:white;
text-shadow: 0 0 1px #333;
font-size:11px;
line-height:0px;
text-indent:12px;
left:-15px;
width: 1px;
height:0px;
border-right:14px solid #E8EDF0;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
}
which basically follows this principles: How to create a ribbon shape in CSS
If you want to add borders all around:
jsBin demo with transform: rotate(45deg) applied to the :before pseudo
.pricetag{
white-space:nowrap;
position:relative;
margin:0 5px 0 10px;
displaY:inline-block;
height:25px;
border-radius: 0 5px 5px 0;
padding: 0 25px 0 15px;
background:#E8EDF0;
border: 1px solid #C7D2D4;
color:#999;
line-height:23px;
}
.pricetag:after{
position:absolute;
right:0;
margin:1px 7px;
font-weight:bold;
font-size:19px;
content:"\00D7";
}
.pricetag:before{
position:absolute;
background:#E8EDF0;
content:"\25CF";
color:white;
text-shadow: 0 0 1px #aaa;
font-size:12px;
line-height:13px;
text-indent:6px;
top:3px;
left:-10px;
width: 18px;
height: 18px;
transform: rotate(45deg);
border-left:1px solid #C7D2D4;
border-bottom:1px solid #C7D2D4;
}
Since the example image in the question has extra outer borders, achieving it with the border trick will involve multiple (pseudo) elements and will become complex (because in addition to the arrow shape, a circle is also needed in front). Instead, the same could be achieved by using transform: rotate() like in the below sample.
The approach is pretty simple and as follows:
The parent div container houses the text that should be present within the price-tag shape.
The :after pseudo-element has transform: rotate(45deg) and produces the triangle shape. This is then positioned absolutely with respect to the left edge of the parent. The background set on the pseudo-element prevents the left border of the parent container from being visible.
The :before pseudo-element forms the circle present on the left side (using border-radius).
The X mark at the end is added using a span tag and the × entity.
The parent div container's width is set to auto so that it can expand based on the length of the text.
Note: This sample uses transforms, so will require polyfills in lower versions of IE.
div {
position: relative;
display: inline-block;
width: auto;
height: 20px;
margin: 20px;
padding-left: 15px;
background: #E8EDF2;
color: #888DA3;
line-height: 20px;
border-radius: 4px;
border: 1px solid #C7D2DB;
}
div:after,
div:before {
position: absolute;
content: '';
border: 1px solid #C7D2DB;
}
div:after { /* the arrow on left side positioned using left property */
height: 14px;
width: 14px;
transform: rotate(45deg);
background: #E8EDF2;
border-color: transparent transparent #C7D2DB #C7D2DB;
left: -6px;
top: 2px;
}
div:before { /* the circle on the left */
height: 4px;
width: 4px;
border-radius: 50%;
background-color: white;
left: 0px;
top: 7px;
z-index: 2;
}
.right { /* the x mark at the right */
text-align: right;
margin: 0px 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>Home<span class='right'>×</span>
</div>
<div>Home Sweet Home<span class='right'>×</span>
</div>
<div>Hi<span class='right'>×</span>
</div>
Fiddle Demo
I wanted a simplified version of what was proposed here (without the hole effect and borders) but with the pointing side of it with rounded corner as well. So I came up with this solution. Visually this is what you get:
The HTML for it:
<div class="price-tag">Marketing</div>
<div class="price-tag">Sales</div>
<div class="price-tag">Inbound</div>
And the CSS for it:
.price-tag {
background: #058;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 0.875rem;
height: 30px;
line-height: 30px;
margin-right: 1rem;
padding: 0 0.666rem;
position: relative;
text-align: center;
}
.price-tag:after {
background: inherit;
border-radius: 4px;
display: block;
content: "";
height: 22px;
position: absolute;
right: -8px;
top: 4px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
width: 22px;
z-index: -1;
}
.price-tag:hover {
background: #07b;
}
original example
Modified: http://jsbin.com/ruxusobe/1/
Basically, it needs to float left, use border-right (instead of left) and modify the padding.
CSS:
.guideList{
font-size: 12px;
line-height: 12px;
font-weight: bold;
list-style-type: none;
margin-top: 10px;
width: 125px;
}
.guideList li{
padding: 5px 5px 5px 0px;
}
.guideList .active{
background-color: #0390d1;
color: white;
}
.guideList .activePointer{
margin-top: -5px;
margin-bottom: -5px;
float: left;
display: inline-block;
width: 0px;
height: 0px;
border-top: 11px solid white;
border-right: 11px solid transparent;
border-bottom: 11px solid white;
}
HTML:
<ul class="guideList">
<li><a>Consulting</a></li>
<li class="active"><span class="activePointer"></span>Law</li>
<li><a>Finance</a></li>
<li><a>Technology</a></li>
</ul>
Here is a simple example...
Orignal Version
Edited Version
CSS:
div {
margin-left: 15px;
background: #76a7dc;
border: 1px solid #CAD5E0;
padding: 4px;
width:50px;
position: relative;
}
div:after {
content:'';
display: block;
position: absolute;
top: 2px;
left: -1.3em;
width: 0;
height: 0;
border-color: transparent #76a7dc transparent transparent;
border-style: solid;
border-width: 10px;
}
Notice on border-color, only right is set with a color and everything else is set to transparent.
using pseudo element and a little bit playing with border you can achieve the exact thing. Check the DEMO.
HTML code is :
<a class="arrow" href="#">Continue Reading</a>
CSS Code is:
body{padding:15px;}
.arrow {
background: #8ec63f;
color: #fff;
display: inline-block;
height: 30px;
line-height: 30px;
padding: 0 12px;
position: relative;
border-radius: 4px;
border: 1px solid #8ec63f;
}
.arrow:before {
content: "";
height: 0;
position: absolute;
width: 0;
}
.arrow:before {
border-bottom: 15px solid transparent;
border-right: 15px solid #8ec63f;
border-top: 15px solid transparent;
left: -15px;
}
.arrow:hover {
background: #f7941d;
color: #fff;
border-radius: 4px;
border: 1px solid #f7941d;
}
.arrow:hover:before {
border-bottom: 15px solid transparent;
border-top: 15px solid transparent;;
border-right: 15px solid #f7941d;
}
I have a requirement to like this image
As you can see in the 1st image there is a link called review and it is at center with black background.I wanted to do like that way and I did this way But the link is coming at top.How can I make as per the image.
Do it in this way
.outer {
width: 89px;
height: 89px;
-webkit-box-shadow: 0px 0px 10px #4d4d4d;
-moz-box-shadow: 0px 0px 10px #4d4d4d;
box-shadow: 0px 0px 10px #4d4d4d;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
border: solid white 3px;
overflow: hidden;
padding: 10px;
}
.image {
background: red;
padding: 0;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
width: 80px;
height: 80px;
overflow: hidden;
}
.bg {
background: url("http://www.computerhope.com/logo.gif");
width: 69px;
height: 69px;
}
.bg a {
margin-top: 40px;
padding-left: 10px;
color: #ffffff;
}
And
<div class="outer">
<div class="image">
<div class="bg"><br />
<a href="http://www.google.com">
Review
</a>
</div>
</div>
</div>
See this code in jsfiddle.
<img src="http://lorempixel.com/200/200/" />
<div>Some Text</div>
<img src="http://lorempixel.com/200/200/" />
<div class="div">Text</div>
And Here IS CSS
div {
position:absolute;
top:100px;
left:100px;
background:black;
opacity:0.5;
}
.div {
position:absolute;
top:100px;
left:300px;
background:black;
opacity:0.5;
}
a {
text-decoration:none;
color:red;
}
have a look at this fiddle demo
I am struggling to create this "button" using CSS.
I also would like to be able to add the text "ABI" and "12/19" manually in my HTML so I can change it.
Attached the result I would like to have with the dimensions.
Thanks for your help.
I had fun creating it, it is not perfect and you will need some tweaking to get it exacly like the image but it should get you on the right path :
FIDDLE DEMO
html:
<div id="abi">ABI</div>
<div id="number">12/19</div>
CSS
div{
float:left;
height:60px;
line-height:60px;
font-size:20px;
margin:0;
padding:0;
}
#abi{
width:75px;
background:gray;
color:blue;
padding-left:25px;
position:relative;
z-index:2;
-webkit-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}
#abi:after{
content:"";
position:absolute;
right:-10px;
top: 19px;
width: 0;
height: 0;
border-top: 11px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid gray;
}
#number{
width:155px;
text-align:right;
padding-right:25px;
background:blue;
color:gray;
-webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}
Something
LIKE THIS?
HTML
<div class='button'>ABI
<div>12/19</div>
</div>
CSS
* {
margin:0;
padding:0;
box-sizing:border-box;
}
.button, .button div {
color:grey;
background:#007bff;
display:inline-block;
line-height:60px;
font-size:20px;
}
.button div {
padding-right:25px;
padding-left:25px;
width:180px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
z-index:1;
text-align:left;
position:relative;
}
.button {
color:#007bff;
background:grey;
padding-left:25px;
width:280px;
text-align:right;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position:relative;
z-index:1;
}
.button div:after {
content:'';
display:block;
position:absolute;
left:0px;
top:20px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 0 10px 14px;
border-color: transparent transparent transparent grey;
z-index:0;
}
Also did one for fun.. :)
Fiddle
CSS
.btn{
position: relative;
border-radius: 10px;
display: table;
font-size: 35px;
font-family: Verdana, sans-serif;
width: 280px;
height: 60px;
background: #2a2c2b;
}
.left{
position: relative;
padding-left: 25px;
color: #0ebfe9;
display: table-cell;
width: 100px;
vertical-align: middle;
}
.right{
color: #2a2c2b;
display: table-cell;
width: 180px;
vertical-align: middle;
padding-left: 14px;
padding-right: 25px;
}
.left:after
{
height: 0px;
content: '';
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #2a2c2b;
position: absolute;
left:90px;
}
HTML
<div class="btn"><span class="left">ABI</span><span class="right">| 12/19</span></div>
(background of btn are gradients, couldn't get them in the code here..)
Looked like fun, had to try it myself: http://jsfiddle.net/8SUX6/1/
Change href="#" to a link, to make it one or add a onclick event for it to execute JS.
ABI <span>12/19</span>
#button {
font-weight: 600;
height: 60px;
width: 60px; /* 60 + 25 + 15 = 100 */
display: block;
text-decoration: none;
background: #2A2C2B;
color: #0EBFE9;
position: absolute;
border-radius: 5px 0 0 5px;
font-family: Segoe UI;
font-size: 40px;
padding-left: 25px;
padding-right: 15px;
}
#button:before {
left: 93px;
top: 10px;
z-index: 3;
content:"";
position: absolute;
width: 0;
height: 0;
border-left: 20px solid #2A2C2B;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
#button span {
top: 0;
letter-spacing: 2px;
color: #2A2C2B;
position: absolute;
z-index: 2;
height: 60px;
width: 155px; /* 155 + 25 = 180px */
background: #0EBFE9;
position: absolute;
left: 100px;
border-radius: 0 5px 5px 0;
padding-right: 25px;
text-align: right;
}
The following can be the css
*{
margin:0;
padding:0;
}
div{
float:left;
margin-top:10px;
font-size:20px;
font-weight:bold;
text-align:center;
height:60px;
}
.abi{
margin-left:10px;
width:100px;
background:#2A2C2B;
color:#0EBFE9;
border-radius:10px 0 0 10px;
}
.abi>p,.num>p{
padding-top:15px;
}
.num{
color:#2A2C2B;
background:#0EBFE9;
margin-right:10px;
width:180px;
border-radius:0 10px 10px 0;
}
.abi:after{
border-bottom: 10px solid transparent;
border-left: 10px solid #2A2B2C;
border-top: 11px solid transparent;
content: "";
position: absolute;
left: 110px;
top: 29px;
}
the following is the html
<div class="abi"><p>ABI</p></div>
<div class="num"><p>12/19</p></div>