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>
Related
Im looking for css code for below shape, i have tried using border radius but have to work with different div's for top border and left curve.
Im looking for css which draws complete shape below. Any help ?
.Curve{
top: 25px;
left: 25px;
width: 50px;
border: solid 1px #4C5D65;
height: 86px;
content: " ";
padding: 0px;
position: absolute;
transform: rotate(271deg);
border-color: transparent transparent #4C5D65 transparent;
border-radius: 0 0 51px 99%/44px;
}
<span class="Curve"> </span>
Here is what i have tried
https://jsfiddle.net/sonymax46/wdaLomnf/3/
Here is an idea with one element. Simply adjust the gradient until you get what you want.
.curve {
width:100px;
height:50px;
border-top:2px solid;
background:
radial-gradient(100% 57% at left,transparent calc(100% - 2px),#000,transparent 100%)
left/15px 100% no-repeat;
}
<div class="curve"></div>
Another idea:
.curve {
width:100px;
height:50px;
border-top:2px solid;
position:relative;
overflow:hidden;
}
.curve:before {
content:"";
position:absolute;
width:80px;
height:80px;
border-radius:50%;
top:calc(50% - 40px);
right:calc(100% - 12px);
border:2px solid;
box-sizing:border-box;
}
<div class="curve"></div>
Maybe change
border-color: transparent transparent #4C5D65 transparent; to
border-color: #4C5D65 transparent #4C5D65 transparent;
or add an element above, make the margins of both equal to zero, and then make the bottom border the same colour.
Hope this help you.
.Curve {
top: 25px;
left: 25px;
width: 50px;
border: solid 1px #4C5D65;
height: 86px;
content: " ";
padding: 0px;
position: absolute;
transform: rotate(271deg);
border-color: transparent transparent #4C5D65 transparent;
border-radius: 0 0 51px 99%/44px;
}
span.Curve:after {
position: absolute;
content: '';
height: 100%;
width: 100%;
border-right: 1px solid #21262D;
top: 92%;
left: -6px;
/* background: rebeccapurple; */
}
<span class="Curve"></span>
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>
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;
}
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
I know only rounded border way. Can't figure out how to create such kind of imageless ul li tabs.
As you see it's not exactly triangle: it's top and bottom sides kinda rounded. Is it possible to create something maximum similiar to the image below with css3? if yes, how?
Thank you in advance!
the markup :
first you have to define your makeup as follow:
<menu type=list>
<li>home</li>
<li>work</li>
</menu>
then use skew, rotate, box-shadow, border-radius and CSS Pseudo-elements as follow:
source: http://www.w3schools.com/css3/css3_2dtransforms.asp
http://www.w3schools.com/cssref/css3_pr_box-shadow.asp
http://www.w3schools.com/cssref/css3_pr_border-radius.asp
http://www.w3schools.com/css/css_pseudo_elements.asp
Demo1:http://jsfiddle.net/kougiland/mVu2z/5/
menu{
position:relative;
width:320px;
height:40px;
}
li{
float:left;
width:50%;
background-color:red;
list-style:none;
position:relative;
height:54px;
text-align:center;
line-height:50px;
color:white;
}
li:before,li:after{
position: absolute;
content: "";
height: 32px;
width: 32px;
border-radius: 4px;
background-color: red;
top: 11px;
-webkit-transform: rotate(45deg) skew(16deg,16deg);
-moz-transform: rotate(45deg) skew(16deg,16deg);
transform: rotate(45deg) skew(16deg,16deg);
}
li:before{
left:-15px;
}
li:after{
right:-15px;
}
li:nth-child(2):before{
box-shadow: 0px 0 0 black,-4px 4px 0 black;
}
Demo2: http://jsfiddle.net/kougiland/mVu2z/4/
the style:
menu{
position:relative;
width:320px;
height:40px;
}
li{
float:left;
width:50%;
background-color:red;
list-style:none;
position:relative;
height:54px;
text-align:center;
line-height:50px;
color:white;
}
li:before,li:after{
position: absolute;
content: "";
height: 26px;
width: 26px;
border-radius: 4px;
background-color: red;
top: 14px;
-webkit-transform: rotate(45deg) skew(30deg,30deg);
-moz-transform: rotate(45deg) skew(30deg,30deg);
transform: rotate(45deg) skew(30deg,30deg);
}
li:before{
left:-13px;
}
li:after{
right:-13px;
}
li:nth-child(2):before{
box-shadow: 0px 0 0 black,-4px 4px 0 black;
}
Demo3: http://jsfiddle.net/kougiland/mVu2z/
menu{
position:relative;
width:320px;
height:40px;
}
li{
float:left;
width:50%;
background-color:red;
list-style:none;
position:relative;
height:54px;
text-align:center;
line-height:50px;
color:white;
}
li:before,li:after{
position:absolute;
content:"";
height:40px;
width:40px;
border-radius:4px;
background-color:red;
top: 7px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
transform:rotate(45deg);
}
li:before{
left:-20px;
}
li:after{
right:-20px;
}
li:nth-child(2):before{
box-shadow: 0px 0 0 black,-4px 4px 0 black;
}
You can use CSS transform rotate property along with border-radius, here, I've rotated an :after pseudo, which is positioned absolute to the container element. And than am using border-radius for the curve.
Demo
div {
height: 30px;
width: 100px;
background: #f00;
position: relative;
margin: 100px;
}
div:after {
background-color: #f00;
content: "";
display: block;
height: 22px;
width: 22px;
transform: rotate(45deg);
border-radius: 0 10px 0 0;
right: -11px;
top: 4px;
position: absolute;
}
Sure!
Chris Coyier was wrote a cool code for this:
http://css-tricks.com/triangle-breadcrumbs