I have a little CSS problem.
I sketched the problem here:
http://jsfiddle.net/0g4b23hp/
The css:
a {
padding: 7px 10px 5px 10px;
background: #FF0000;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
}
.bottom-1 {
position: absolute;
bottom: 0;
right: 0;
padding:5px 10px 5px 10px;
}
What I want to achieve is that in all browsers the 2 buttons get across the black border and that the corners have radius 0px; But I don't get it right;
I already tried to make the padding-bottom:50px and overflow:hidden but didn't work.
What I want to achieve is that in all browsers the 2 buttons get across the black border and that the corners have radius 0px;
I think will do what you want.
a {
padding: 7px 10px 5px 10px;
background: #FF0000;
/* REMOVED
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
*/
}
#container {
width: 500px;
height: 250px;
border: 4px solid #000000;
}
.bottom-1 {
position: absolute;
bottom: 0;
right: 0;
padding:5px 10px 5px 10px;
transform:translateY(50%);
}
.container {
position: relative;
}
<body>
<div class="container" id="container">
<div class="bottom-1">
<div class="background2"></div> Action 1
Action 2
</div>
</div>
</body>
Related
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 want the double round border around my image that is actually square image.
I tried creating. here is the js fiddle . The exact that i want is this
Here is the code
CSS
.home_boxes {
background: none repeat scroll 0 0 #f1917b;
color: #ffffff;
padding: 40px 0;
text-align: center;
}
img {
border: 5px solid #ffffff;
border-radius: 50%;
margin: 20px;
outline: 2px solid #ffffff;
outline-offset: 9px;
}
img:before {
border: 5px double #ff0000;
border-radius: 50%;
bottom: 10px;
content: "";
left: 10px;
position: relative;
right: 10px;
top: 10px;
}
HTML
<div class="home_boxes">
<div class="col-md-4">
<img src="http://placehold.it/310x311">
</div>
</div>
Please any help is really appreciated.
Use box-shadow. It can have several values:
img {
/* first white ring */
border: 5px solid #ffffff;
/* background 5px ring + ring link border */
box-shadow: 0 0 0 5px #f1917b, 0 0 0 10px #fff;
border-radius: 50%;
margin: 20px;
}
Fiddle with double circle border.
if the image is not transparent PNG. you can use padding and background , just like below;
img {
border: 5px solid #ffffff;
padding:5px; background:blue;
border-radius: 50%;
margin: 20px;
}
demo here ----> FIDDLE
background-color colors the total size of the element, including padding and border. Is there a way to color only the content background without the padding and border?
Make only the 220px yellow.
div.ex {
width: 220px;
padding: 10px;
border: 5px solid;
margin: 15px;
background-color:yellow;
}
Here we go for your div
<div>Some text or anything</div>
Set CSS like this:
div {
margin:0px auto;
width:100%;
height:50px;
background-color:white;
float:left;
padding:10px;
border:2px solid red;
position: relative;
z-index: 10;}
div:after {
background-color: grey;
content: '';
display: block;
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
z-index: -1;
}
See Demo
if I understood correctly, you could create an inner div with a 100% width, this will fill all the parent without the padding.
http://jsbin.com/bocalulu/5/edit?html,css,output
div.ex {
width: 220px;
padding: 10px;
border: 5px solid yellow;
margin: 15px;
background-color:yellow;
display: inline-block;
}
Example
http://jsfiddle.net/2zDvK/
you can do this trick
div.ex {
width: 220px;
border: 15px solid COLOR; /* COLOR - color of the background of the parent element */
margin: 15px;
padding: 0;
background-color:yellow;
}
Is there a way to color only the content background without the
padding and border?
Presumably the easiest way to simulate that would be to use an inset box-shadow of the same size as your padding.
Demo: http://jsfiddle.net/z8q33/
Relevant CSS:
div {
width: 220px;
padding: 10px;
border: 5px solid;
margin: 15px;
background-color: yellow;
box-shadow: inset 0 0 0 10px #ccc; /* same size as that of padding */
}
I am trying to add a border left to my selected buttons but there seems to be something odd happening I can't figure out.
You can see it in this JSFiddle.
The blue border on the left seems to have an odd 1px above it? It just doesnt sit perfectly square as i would have hoped.
HTML:
<div id="sidebarnav">
<br>
<div class="button-selected">Blog</div>
</div>
CSS:
#sidebarnav {
width:250px;
background-color:#202020;
height: 100%;
float:left;
position:fixed;
border-right: 1px solid #bbb;
}
.button-selected {
text-align:left;
width: 236;
padding-left: 10px;
padding-top: 6px;
padding-bottom: 6px;
background-color:#161616;
color: #fff;
border-top: 1px solid #0A0A0A;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.04) inset;
overflow:auto;
cursor: pointer;
border-left: 4px solid #3498db;
}
You could work around the corner seam issue by adding a pseudo-element that acts like a border. Something like the following:
.button-selected {
/* all of your original styling here */
position: relative; /* relative positioning required for position
absolute on pseudo element */
padding-left: 14px; /* 4px of padding added to compensate for
width of pseudo element */
}
.button-selected:after {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 4px; /* width of desired 'border' effect */
background: #3498db;
}
Updated example of your jsfiddle here.
Does anyone know how to make edgy corners like in the following below? See how the edge wraps around the corner. I would like to know the term as well (if any). cross browser support (IE8 and up, bonus IE7) is a must. Thanks for any help.
Check out this tutorial. I don't know how crossbrowser compatible it is (as it is CSS3), but it achieves the effect you want.
HTML:
<div>
<h2></h2>
</div>
CSS:
div {
width: 200px;
padding: 50px;
margin: 0 auto;
border: 1px solid #333;
}
h2 {
position: relative;
width: 50%;
height: 50px;
margin: 30px 10px 10px -70px;
background-color: orange;
}
h2:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #666 #666 transparent transparent;
}
JS Fiddle Example
.box{
background: #666;
border: 4px solid #fff;
box-shadow: 0px 0px 20px #000;
width: 200px;
height: 200px;
margin: 40px auto;
position: relative;
}
.ribbon{
background: #FFA500;
position: absolute;
width: 100%;
top: 20px;
left: -20px;
height: 20px;
padding-right: 20px;
}
.ribbon::before{
content: '';
position: absolute;
left: 0px;
top: 20px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 16px 10px 0;
border-color: transparent #FFA500 transparent transparent;
z-index: -5;
}
HTML:
<div class="box">
<div class="ribbon"></div>
</div>
(DEMO)
I don't think IE 7/8 support the ::before pseudo-element, so if you want IE compatibility add another element and put ::before styles on it :)
That edgy corner is only a div with a triangle actually, you only need ONE element to do it.
<div id="myCorner"></div>
myCorner will be the div, and myCorner:after will be the triangle.
Check it out : http://jsfiddle.net/Starx/Xp6E7/2/
#myCorner
{
width:100px;
height:70px;
background-color:orange;
-webkit-box-shadow: 0 4px 5px -3px black;
-moz-box-shadow: 0 4px 5px -3px black;
box-shadow: 0 4px 5px -3px black;
position:relative;
}
#myCorner:after
{
content:"";
position:absolute;
left: 0;
top:100%;
width: 0px;
height: 0px;
border-style:solid;
border-width: 5px 10px;
border-color: orange orange transparent transparent;
z-index: -1;
}