I'm converting a PSD to HTML and having trouble with a border. Is there any way to add a border to an image with transparent background? Let's say for example I have this image.
And so there's a caret on the image and I want to do something like this.(See below):
How can I make the white border in the image?
Here's a way using an extra (required unfortunately) element and a bunch of pseudo elements.
I've used different colors so you can see the two 'caret's.
Codepen Demo
HTML
<div class="wrapper">
<img src="http://lorempixel.com/output/nightlife-q-c-500-200-9.jpg" alt="" />
<div class="main">
<div class="caret-border"></div> <!---extra div -->
</div>
</div>
CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: lightgrey;
}
.wrapper {
width:650px;
margin: 10px auto;
border:1px solid grey;
}
.wrapper img {
display: block;
width:100%;
height:auto;
}
.main {
position: relative;
min-height:150px;
background: #bada55;
}
.main:before,
.main:after {
position: absolute;
content:"";
height:0;
width:calc(50% - 16px);
height:0px;
transform:translateY(-100%);
//top:-16px;
z-index:2;
border-style:solid;
}
.main:before {
left:0;
border-width: 0px 16px 16px 0;
border-color:transparent transparent green transparent;
}
.main:after {
right:0;
border-width: 0px 0px 16px 16px;
border-color:transparent transparent green transparent;
}
.caret-border {
height:0px;
background: red;
position: absolute;
width:100%;
}
.caret-border:before,
.caret-border:after{
position: absolute;
content:"";
height:0px;
top:0;
width:calc(50% - 14px);
z-index:1;
border-style:solid;
transform:translateY(-100%);
//top:-18px;
}
.caret-border:before {
left:0;
border-width: 0px 16px 18px 0;
border-color:transparent transparent white transparent;
}
.caret-border:after{
right:0;
border-width: 0px 0px 18px 16px;
border-color:transparent transparent white transparent;
}
You can use a png image with transparent background.
http://jsfiddle.net/BWxfv/
#caret {
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
Related
I am attempting to align the border of the pseudo-element to evenly match the border of the button. I am using ::before and ::after pseudo-elements overlaid to get this effect, but they do not properly match the rest of the border.
I have messed around with the left and right positioning as well as the border-width of each element, but can't seem to get them to line up perfectly
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.btn-txt{
color: black;
}
button {
border: none;
outline: none;
padding: 0;
border-width: 0;
left: 40%;
}
button:hover {
cursor: pointer;
}
.signpost { /* our rectangle */
width:250px;
height:50px;
background-color: yellow;
margin:0px auto;
position: relative;
border-top: 2px solid red;
border-bottom: 2px solid red;
border-left: 2px solid red;
}
.signpost:after { /* our pseudo-element */
content:"";/* required */
position: absolute; /* takes the 'cap' out off flow */
top:0%; /* stick it to top edge of the sign */
left:81%; /* push it way overto the right*/
height:0; /* we're doing this with borders remember */
width:0;
border-width: 25px;
border-style:solid;
border-color: #fff; /* same as bg of our rectangle */
/* now we make some of theborders disappear*/
border-top-color:transparent;
border-bottom-color:transparent;
border-left-color:transparent;
}
.signpost:before { /* our pseudo-element */
content:"";/* required */
position: absolute; /* takes the 'cap' out off flow */
top:0%; /* stick it to top edge of the sign */
left:80%; /* push it way overto the right*/
height:0; /* we're doing this with borders remember */
width:0;
border-width: 25px;
border-style:solid;
border-color: red; /* same as bg of our rectangle */
/* now we make some of theborders disappear*/
border-top-color:transparent;
border-bottom-color:transparent;
border-left-color:transparent;
}
<button class="signpost">
<p class="btn-txt">HELLO</p>
</button>
Example of current issue: https://codepen.io/codingforthefuture/pen/YzKeeVJ
Here is a different idea with less of code where the alignment will be easy to handle:
.box {
display:inline-block;
position:relative;
margin:10px;
padding:10px 50px 10px 10px;
border:2px solid red;
border-right:0;
z-index:0;
background:linear-gradient(yellow,yellow) left/calc(100% - 40px) 100% no-repeat;
}
.box:before,
.box:after{
content:"";
position:absolute;
z-index:-1;
right:0;
width:40px;
top:0;
bottom:50%;
border-right:2px solid red;
background:yellow;
transform:skewX(-45deg);
transform-origin:top;
}
.box:after {
transform:skewX(45deg);
transform-origin:bottom;
top:50%;
bottom:0;
}
<div class="box"> some text </div>
<div class="box"> some long long text </div>
<div class="box"> some long <br> long text </div>
I think I came to a suitable solution. From my original attempt I made the pseudo elements complete squares and rotated them 45deg, then overlapped them. I think this resolves the issues when zooming in and out too. It also makes the edges of the flag pointed instead of squared off, which I think looks better.
#flag4 {
width: 200px;
height: 56px;
box-sizing: content-box;
padding-top: 15px;
position: relative;
background: yellow;
color: white;
font-size: 11px;
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
border-top: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
margin-bottom: 20px;
}
#flag4::before,
#flag4::after {
content: "";
position: absolute;
top: 10px;
width: 0;
height: 0;
left: 87.2%;
border-right: 26px solid #fff;
border-top: 26px solid #fff;
border-bottom: 25px solid #fff;
border-left: 25px solid #fff;
transform: rotate(45deg);
}
#flag4::before{
border-right: 26px solid red;
border-top: 26px solid red;
border-bottom: 25px solid red;
border-left: 25px solid red;
left: 86.6%;
}
codepen: https://codepen.io/codingforthefuture/pen/WNezNzZ
I Used to CSS-border-width to Make that shape but now I can't get a border around this shape. Or there is another option to make this shape.
Check Out On snippet
.month {
width: 0;
height: 0;
border: 61px solid transparent;
border-bottom-color: #008fc1;
position: relative;
top: -61px;
}
.month:after {
content: '';
position: absolute;
left: -61px;
top: 61px;
width: 0;
height: 0;
border: 61px solid transparent;
border-top-color: #acd3f1;
}
<div class="month">
</div>
You can simplify your code like below:
.month {
width:100px;
height:100px;
background:
linear-gradient(to bottom left,#008fc1 50%,#acd3f1 0) content-box,
#acd3f1;
padding:4px; /* to control the border */
margin:25px;
transform:rotate(-45deg);
}
<div class="month">
</div>
You can easily do this with a pseudo element to be able to add content:
.month {
width:100px;
height:100px;
position:relative;
z-index:0;
margin:25px;
color:#fff;
line-height:80px;
}
.month:before {
content:"";
position:absolute;
z-index:-1;
left:0;
right:0;
top:0;
bottom:0;
background:
linear-gradient(to bottom left,#008fc1 50%,#acd3f1 0) content-box,
#acd3f1;
padding:4px; /* to control the border */
transform:rotate(-45deg);
}
<div class="month">
some text here
</div>
Basically I want a sexy, responsive circle button that is transparent so you can see the background through it, but with an opaque outline so you can see the button and opaque text (or maybe I will add a font-awesome icon at a later stage).
Here is my JS fiddle so you can see what I am trying to do:
http://jsfiddle.net/njd2g94u/
.round-button {
width:25%;
}
.round-button-circle {
width: 100%;
height:0;
padding-bottom: 100%;
border-radius: 50%;
border:10px solid #98a1a4;
overflow:hidden;
}
.round-button-circle {
width: 100%;
height:0;
padding-bottom: 100%;
border-radius: 50%;
border:10px solid #98a1a4;
overflow:hidden;
background: #fff;
background-opacity: 0;
box-shadow: 0 0 3px gray;
}
.round-button-circle:hover {
background:#30588e;
}
.round-button a {
display:block;
float:left;
width:100%;
padding-top:50%;
padding-bottom:50%;
line-height:1em;
margin-top:-0.5em;
text-align:center;
color:#e2eaf3;
font-family:Verdana;
font-size:1.2em;
font-weight:bold;
text-decoration:none;
}
Thanks in advance!
you can and should use rgba for colors with transparency. The last parameter is the transparency level, any number from 0 to 1. The color below is roughly equivalent to "#98a1a4."
border: 10px solid rgba(151, 162, 164, 0.25);
There's no background-opacity. May be you are looking for this:
.round-button-circle {
width: 100%;
height: 0;
padding-bottom: 100%;
border-radius: 50%;
border: 10px solid #98a1a4;
overflow: hidden;
background: transparent; /* Change it to transparent */
/* remove background-opacity */
box-shadow: 0 0 3px gray;
}
Fiddle: http://jsfiddle.net/xppow236/
I'm trying to make some kind of "triangular ornament" bar with html/css. Can you please tell me how to make such?
Here is the image :
Thanks in advance
I have made this by mixing two triangles and a rectangle see if this is what you want http://jsfiddle.net/xkwbt73v/5/
HTML
<div id="triangle-left"></div>
<div id="triangle-left-down"></div>
<div id="bar"></div>
CSS
#triangle-left {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
#triangle-left-down {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
#bar{
width:1000px;
height:200px;
background-color:red;
position:absolute;
margin-left:100px;
margin-top:-200px;
}
If you want to do it using one element then have a look at Pseudo-elements - CSS | MDN
HTML:
<figure></figure>
DEMO 1 using Background-image
figure{
width:320px;
height:64px;
background:blue;
position:relative;
margin:40px auto;
}
figure:before{
content: '';
position: absolute;
left: -60px;
width: 100px;
height: 100%;
background-image: linear-gradient(32deg, transparent 50%, blue 0%),linear-gradient(147deg, transparent 50%, blue 0%);
}
DEMO 2 using 2 elements
CSS:
figure{
width:320px;
height:64px;
background:blue;
position:relative;
margin:40px auto;
}
figure:before, figure:after{
content:'';
position:absolute;
display:block;
left: -40px;
width:0;
height:0;
border-left: 40px solid transparent;
border-right: 0px solid transparent;
}
figure:before{
top: 0;
border-top: 32px solid blue;
}
figure:after{
bottom: 0;
border-bottom: 32px solid blue;
}
http://jsfiddle.net/5p4yLrz4/ :)
HTML:
<div class="wrapper">
<div class="triangle"></div>
</div>
CSS:
.wrapper{
width:300px;
background-color:orange;
}
.triangle {
width:0;
border-width: 30px;
border-right:0px;
border-color: transparent transparent transparent yellow;
border-style: solid;
}
I need some trick to insert border blank space by using CSS like this..
I using CSS box-shadow like this
box-shadow:
-1px 0px 0px 0px #000,
0px -1px 0px 0px #000,
0px 1px 0px 0px #000,
1px 1px 0px 0px #000
I have no idea how to make border / shadow look like the picture.
I will use only one html element.. <div></div>
Any trick ?
Playground : http://jsfiddle.net/ES66k/
with one div only: http://jsfiddle.net/ES66k/1/ (tested on Fx18 and chrome)
div {
width:300px;
height:170px;
margin:100px;
border-top: 1px black solid;
border-bottom: 1px black solid;
position: relative;
}
div:after, div:before {
content: "";
position: absolute;
top: -1px;
width: 20px;
height: 172px;
border-top: 40px white solid;
border-bottom: 40px white solid;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div:before { border-left: 1px black solid; left: 0; }
div:after { border-right: 1px black solid; right: 0; }
It's bit hacky, anyway, since it's relying on a fixed height and on a solid color as background (white) but maybe could be useful for your purpose.
You can create 4 <div>'s with classes .top-left, .top-right, .bottom-left and .bottom-right. Make them absolute and the container relative. Size them, make them the color of the containers bg-color and get them to the corners with top, right, bottom and left properties. Their value must be minus the border width.
Here is example of element with 3px border:
HTML:
<div class="box">
<div class="corner top-left"></div>
<div class="corner top-right"></div>
<div class="corner bottom-left"></div>
<div class="corner bottom-right"></div>
</div>
CSS:
.box{
width: 300px;
height: 300px;
border: 3px solid #666;
position:relative;
}
.corner{
width: 10px;
height: 10px;
background-color: #fff;
position: absolute;
}
.top-left{
top: -3px;
left: -3px;
}
.top-right {
top: -3px;
right: -3px;
}
.bottom-left{
bottom: -3px;
left: -3px;
}
.bottom-right{
bottom: -3px;
right: -3px;
}
Try to use the CSS3 attribute border-image:
Here's a demo you can have a look and try out yourself: CSS3 border-image
div {
width:300px;
height:170px;
margin:100px;
position:relative;
background:#ccc;
}
div:before, div:after {
content:"";
position:absolute;
top:0;
left:0;
}
div:before {
width:280px; /*****-20px*****/
height:168px; /*****-2px*****/
margin-left:10px;
border-top:1px solid #f00;
border-bottom:1px solid #f00;
}
div:after {
width:298px; /*****-2px*****/
height:150px; /*****-20px*****/
margin-top:10px;
border-left:1px solid #f00;
border-right:1px solid #f00;
}
Demo : http://jsfiddle.net/ES66k/4/
Done now, Don't need to set background-color :D
But thanks #Fabrizio Calderan anyway :D