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
Related
I have used this question to create buttons. But when I try to create a bottom left shadow to the button the white area will appear as:
.btn {
height: 40px;
background: red;
width: 128px;
margin: 15px 5px 15px 5px;
cursor: hand;
text-align: center;
vertical-align: middle;
line-height: 40px;
-webkit-box-shadow: 2px 3px 3px #666666;
-moz-box-shadow: 2px 3px 3px #666666;
box-shadow: 2px 3px 3px #666666;
}
.btn:before {
width: 0px;
height: 20px;
border-left: 20px solid red;
border-top: 20px solid white;
float:right;
content:"";
}
.btn:hover{
-webkit-box-shadow: 1px 1px 1px #666666;
-moz-box-shadow: 1px 1px 1px #666666;
box-shadow: 1px 1px 1px #666666;
}
.userNave{
width: 140px;
}
<nav class="userNave">
<div class="btn"
onClick="alert('Hi')"
style="">Click Me Me</div>
<div class="btn"
onClick="alert('Hello')"
style="">No Click Me </div>
</nav>
Is there any workaround for this. Or even better. Is there any way to create a true Trapezoid button so that it will work with the shadow and there will be no problem with the background matching.
This is the best I could come up with, using the pseudo elements as the background.
.btn {
position: relative;
height: 40px;
width: 128px;
margin: 15px 5px 15px 5px;
padding: 0 10px 5px 0;
cursor: hand;
text-align: center;
vertical-align: middle;
line-height: 40px;
overflow: hidden;
}
.btn:before {
position: absolute;
left: -23px; top: 0;
width: calc(100% - 5px);
height: 50%;
background: red;
content: "";
z-index: -1;
transform: skewX(45deg);
transform-origin: left top;
box-shadow: 0px 1px 3px 1px #666666;
}
.btn:after {
position: absolute;
left: 0; top: 50%;
width: calc(100% - 5px);
height: calc(50% - 5px);
background: red;
content: "";
z-index: -1;
box-shadow: 2px 2px 4px #666666;
}
.userNave {
width: 140px;
}
<nav class="userNave">
<div class="btn" onClick="alert('Hi')" style="">Click Me Me</div>
<div class="btn" onClick="alert('Hello')" style="">No Click Me</div>
</nav>
A SVG image would most likely be the better choice though.
.btn {
position: relative;
height: 40px;
width: 128px;
margin: 15px 5px 15px 5px;
padding: 0 0 5px 0;
cursor: hand;
text-align: center;
vertical-align: middle;
line-height: 40px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='trapezoid' viewbox='0 0 118 45' preserveAspectRatio='none'%3E %3Cfilter id='dropshadow' height='130%25'%3E %3CfeGaussianBlur in='SourceAlpha' stdDeviation='3'/%3E %3C!-- stdDeviation is how much to blur --%3E %3CfeOffset dx='2' dy='2' result='offsetblur'/%3E %3C!-- how much to offset --%3E %3CfeMerge%3E %3CfeMergeNode/%3E %3C!-- this contains the offset blurred image --%3E %3CfeMergeNode in='SourceGraphic'/%3E %3C!-- this contains the element that the filter is applied to --%3E %3C/feMerge%3E %3C/filter%3E %3Cpath d='M0,0 L100,0 L120,20 L120,40 L0,40z' fill='red' style='filter:url(%23dropshadow)'%3E%3C/path%3E %3C/svg%3E");
}
.userNave {
width: 140px;
}
<nav class="userNave">
<div class="btn" onClick="alert('Hi')" style="">Click Me Me</div>
<div class="btn" onClick="alert('Hello')" style="">No Click Me</div>
</nav>
In your example, you can't add a proper box-shadow without having these white parts on each side. That is because the CSS border colouring the grey shaped trapeziod DIV.
In the example above, they are using an .SVG file (image), since it is an image, the original shape of it is a trapezoid, not a rectangle with white side like yours.
You will need to draw an .svg in the shape and color you want, and then add a shadow to the element itself.
Here are more informations about SVG.
I hope it helps.
Is there a way to create a trapezoid shadow effect underneath a image such as the one in the image?
I only know create trapezoid with border. What i've came up with so far is this:
HTML
<div id="trapezoid"></div>
CSS
#trapezoid {
height: 0;
width: 120px;
border-bottom: 80px solid #05ed08;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
padding: 0 8px 0 0;
}
Thanks in advance.
I've created a jsFiddle that demonstrates a way to do it. In essence: give the image a shadow, overlay a transparent div on it that hides left, top and right border of the shadow. Because of these white borders this trick will not work if you use a complex background.
.wrapper {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;
}
.wrapper img {
box-shadow: 0 0 50px black;
margin: 0px 30px 50px 30px;
}
.wrapper .overlay {
position: absolute;
left: 0;
top: 0;
display: inline-block;
width: 100%;
height: 100%;
border-top: 0px solid white;
border-left: 30px solid white;
border-right: 30px solid white;
border-bottom: 50px solid transparent;
box-sizing: border-box;
}
<div class="wrapper">
<img src="http://i.stack.imgur.com/eg2RH.jpg" width="400" />
<div class="overlay"></div>
</div>
I'm basically trying to do a "CSS-triangle" (you know, an element where the entire shape is generated using borders) but instead of a triangle shape, I want a square with rounded corners on the left side and straight corners on the right side.
This works fine in Chrome but IE11 creates a weird artefact at the top-left corner. (a background-colored oval right where the rounded corner should be. really strange!)
Is there a way to create a workaround for IE11?
.RoundedElement {
width: 0;
height: 0;
border-top: none;
border-bottom: 50px solid transparent;
border-right: 20px solid #00a2d4;
position: relative;
right: 20px;
border-radius: 15px 0px 0px 15px;
border-color: #F7A824;
}
http://codepen.io/anon/pen/QbjaOG
I think you are over complicating the problem here.
Try the following:
body { margin: 50px; }
.RoundedElement {
width: 30px;
height: 50px;
position: relative;
right: 20px;
border-radius: 15px 0px 0px 15px;
background-color: #F7A824;
}
<div class="RoundedElement">
</div>
Why not use the regular background-color with border radius that works by default ?
If you still want to use border try the following:
body { margin: 50px; }
.RoundedElement {
width: 20px; //Added 20px to fix in FF.
height: 0px;
border-top:30px solid transparent;
border-bottom: 30px solid transparent;
border-right: 40px solid #00a2d4;
position: relative;
border-radius: 15px 0px 0px 15px;
border-color: #F7A824;
}
<div class="RoundedElement">
</div>
tweaking the code to:
body { margin: 50px; }
.RoundedElement {
width: 10px;
height: 0;
border-top:30px solid transparent;
border-bottom: 30px solid transparent;
border-right: 10px solid #00a2d4;
position: relative;
right: 20px;
border-radius: 15px 0px 0px 15px;
border-color: #F7A824;
z-index:2
}
pen
works in FF (should also in ie but not tested)
There is no need to do it like this. Use border-radius (support here). Also what you have is not a square, this is.
div {
width: 100px;
height: 100px;
border-radius: 50% 0px 0px 50%;
background: #000;
}
<div></div>
It not work because your div size is 0: width: 0; height: 0;
I am trying to create a css design like the image attached below. Actually I need to create this style only using CSS without using any images.
I tried get it to work but not sure How to create inner triangle.
This is my HTML -
body {
background: #cdc6e1;
}
.content-box {
background: #28166f;
width: 250px;
height: 100px;
}
.tag {
background: #f8c300;
width: 100px;
height: 0;
padding-left: 10%;
padding-bottom: 10%;
overflow: hidden;
}
.tag:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left: -500px;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-bottom: 500px solid #f8c300;
}
<div class="content-box">
<div class="tag">
<h1>1<span>st</span></h1>
</div>
<div class="name">
<h1>First<br>
Place</h1>
</div>
</div>
Hope somebody may help me out to achieve to this custom style.
Thank you.
A basic mockup would be to use some pseudo elements in order to generate this:
.outer {
height: 200px;
width: 400px;
background: purple;
border: 10px solid pink;
position: relative;
text-Align: right;
font-size: 50px;
line-height: 200px;
}
.outer:before,
.outer:after {
height: 0;
width: 0;
position: absolute;
content: "";
border-bottom: 100px solid yellow;
border-right: 70px solid transparent;
border-left: 70px solid transparent;
bottom: 0;
left: 20px;
z-index: 8;
}
.outer:after {
border-bottom: 130px solid blue;
border-right: 90px solid transparent;
border-left: 90px solid transparent;
z-index: 0;
}
.place {
position: absolute;
left: 50px;
color: red;
bottom: -20px;
font-size: 100px;
line-height: initial;
z-index: 10;
text-shadow:
3px 3px 0 white,
/* Simulated effect for Firefox and Opera
and nice enhancement for WebKit */
-1px -1px 0 white,
1px -1px 0 white,
-1px 1px 0 white,
1px 1px 0 white;
}
<div class="outer">First Place
<div class="place">1st</div>
</div>
Note. The text outline property is yet to be implemented in any of the major browsers yet, so it may require a 'larger white text' to be positioned behind to create this text outline in your mockup.
A workaround (as stateed in the comments) would be to 'hack' the text shadow:
text-shadow:
3px 3px 0 white, /* Simulated effect for Firefox and Opera
and nice enhancement for WebKit */
-1px -1px 0 white,
1px -1px 0 white,
-1px 1px 0 white,
1px 1px 0 white;
Text Stroke
Although only available in webkit broswers, you may possibly want to use text-stroke for your 'white border' to the text (unavailable in IE or Firefox)
div {
font-size: 50px;
position: relative;
height: 50px;
width: 50px;
color: black;
}
div:before {
content: "1st";
z-index: -1;
left: 0;
top: 0;
position: absolute;
-webkit-text-fill-color: black;
-webkit-text-stroke: 8px red;
}
html {
background: gray;
}
<div>
1st
</div>
<br/>
<strong>Note</strong> only available in webkit browsers
Create a duplicate triangle and place it behind. Code given below. JSBin: http://jsbin.com/totewinizu/2/
HTML:
.tag {
width: 100px;
display: block;
position: relative;
top: 20px;
border-color: transparent transparent red transparent;
border-style: solid;
border-width: 0px 60px 80px 60px;
height: 0px;
width: 0px;
z-index: 99;
}
.dupe {
position: absolute;
border-color: transparent transparent white transparent;
border-style: solid;
border-width: 0px 60px 80px 60px;
top: 40px;
left: 20px;
z-index: 9;
}
<div class="content-box">
<div class="tag">
<h1>1</h1><span>st</span>
</div>
<div class='tag dupe'>
</div>
<div class="name">
<h1>First<br>
Place</h1>
</div>
</div>
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;
}