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>
Related
I need some help.
How can I display the html code according to the attached image.
I tried modifying the css, but it's not ok
div {
margin:50px;
background-color: #c1c1c1;
border:#000 solid 1px;
position:relative;
}
div:after{
content:'';
width:24px;
height:24px;
background:#fff;
position:absolute;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
top:-12px;
left:50px;
border-right:#000 solid 2px;
border-bottom:#000 solid 2px;
}
<div></div>
Thank You
A bit of transform:skew() does it.
Unless you're targeting very old browsers, it's no longer necessary to include the vendor-specific prefixes on these rules; they're broadly supported. (Mozilla/Firefox and IE haven't needed the prefixes for 2d transforms since 2012; Safari since 2015).
div {
margin:50px;
background-color: #c1c1c1;
border:#000 solid 1px;
position:relative;
}
div:after{
content:'';
width:24px;
height:24px;
background:#fff;
position:absolute;
top:-12px;
left:50px;
border-bottom:#000 solid 2px;
border-left:#000 solid 2px;
transform:skew(0,-45deg)
}
<div></div>
Here is another way to have transparency:
div {
margin: 50px;
height: 2px;
background: linear-gradient(to right, #000 44px, transparent 44px, transparent 60px, #000 60px);
position: relative;
}
div:before,
div:after {
content: '';
width: 2px;
position: absolute;
top: 2px;
background: #000;
}
div:after {
height: 26px;
transform-origin: top right;
transform: rotate(45deg);
left: 60px;
}
div:before {
height: 19px;
top: 0px;
left: 42px;
}
body {
background: pink
}
<div></div>
First, I know there are similar questions available (like. Create concave corners in css) but they don't really cover this situation.
This is not about single cell/div element.
I have three blocks that will have some text content inside:
top-middle centered block (narrow)
middle-middle block (screen-wide)
bottom-middle centered block (narrow)
Basically something like a cross (text removed):
The outer corners (8) is straighforward but how could I achieve those inner ones (4)?
see bellow code, maybe it needs some adjustments but the idea is that you use pseudo-elements to make those inner borders
let me know if this is what you want
.colored {
background:yellow;
border:5px solid green;
width:100px;
height:100px;
box-sizing:border-box;
position:relative;
}
#content {
width:300px;
position:relative;
background:#000;
}
.top,.bottom { position:relative;margin:0 auto;clear:both}
.top { border-bottom:none}
.bottom { border-top:none}
.left { border-right:none}
.right { border-left:none;}
.colored.center { border:none;}
.left,.center,.right { float:left;}
.top { border-top-left-radius:10px;border-top-right-radius:10px;}
.bottom { border-bottom-left-radius:10px;border-bottom-right-radius:10px;}
.right { border-bottom-right-radius:10px;border-top-right-radius:10px;}
.left { border-bottom-left-radius:10px;border-top-left-radius:10px;}
.top:before {
position:absolute;
height:100%;
width:100%;
left:-100%;
top:5px;
content:"";
border-bottom-right-radius:10px;
border-right:5px solid green;
border-bottom:5px solid green;
z-index:9999;
box-sizing:border-box;
}
.top:after {
position:absolute;
height:100%;
width:100%;
right:-100%;
top:5px;
content:"";
border-bottom-left-radius:10px;
border-left:5px solid green;
border-bottom:5px solid green;
z-index:9999;
box-sizing:border-box;
}
.bottom:before {
position:absolute;
height:100%;
width:100%;
left:-100%;
bottom:5px;
content:"";
border-top-right-radius:10px;
border-right:5px solid green;
border-top:5px solid green;
z-index:9999;
box-sizing:border-box;
}
.bottom:after {
position:absolute;
height:100%;
width:100%;
right:-100%;
bottom:5px;
content:"";
border-top-left-radius:10px;
border-left:5px solid green;
border-top:5px solid green;
z-index:9999;
box-sizing:border-box;
}
<div id="content">
<div class="top colored">
</div>
<div class="left colored">
</div>
<div class="center colored">
</div>
<div class="right colored">
</div>
<div class="bottom colored">
</div>
</div>
Variation with just three divs, a bit hacky but functional. Uses pseudo elements, transforms and inner box-shadow.
div {
background-color: #000;
min-height: 100px;
}
.center {
width: 100px;
margin: 0 auto;
}
.rounded {
border-radius: 20px;
border: 5px solid red;
}
.conc {
position: relative;
}
.conc::before,
.conc::after {
content: '';
position: absolute;
border: 5px solid red;
border-radius: 20px;
width: 25px;
height: 25px;
background-color: trnaspanret;
border-color: red transparent transparent;
z-index: 3;
box-shadow: white 0px 0px 0px 20px inset
}
.conc.bottom {
margin-bottom: -5px;
border-bottom: 0;
border-radius: 20px 20px 0 0
}
.conc.top {
margin-top: -5px;
border-top: 0;
border-radius: 0 0 20px 20px
}
.conc::before {
left: -35px;
}
.conc::after {
right: -35px;
}
.conc.top::before,
.conc.top::after {
top: 0px;
}
.conc.bottom::before,
.conc.bottom::after {
bottom: 0px;
}
.conc.bottom::before {
transform: rotate(135deg)
}
.conc.bottom::after {
transform: rotate(-135deg)
}
.conc.top::before {
transform: rotate(45deg)
}
.conc.top::after {
transform: rotate(-45deg)
}
.centerblinders {
position: relative;
}
.centerblinders::before,
.centerblinders::after {
content: '';
position: absolute;
width: 130px;
height: 20px;
background-color: #000;
left: 50%;
transform: translatex(-50%);
z-index: 2;
}
.centerblinders::before {
top: -15px;
}
.centerblinders::after {
bottom: -15px;
}
<div class="rounded center conc bottom"></div>
<div class="rounded centerblinders"></div>
<div class="rounded center conc top"></div>
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'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;
}
How to accomplish this div border using css:
I tried using dashed border but leads to this:http://jsfiddle.net/23qGr/
div {width: 20px;
height: 20px; border: 6px #6a817d dashed;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
You could use pseudo element and transparent/black borders : DEMO
div {
width: 20px;
height: 20px;
padding:6px;
position:relative;
}
div:before , div:after {
content:'';
border:6px solid transparent;
position:absolute;
}
div:before {
left:2px;
right:2px;
top:0;
bottom:0;
border-top-color:black;
border-bottom-color:black;
}
div:after {
top:2px;
bottom:2px;
left:0;
right:0;
border-right-color:black;
border-left-color:black;
}
If you increse border-width, it looks better : demo