<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Title</title>
</head>
<body>
<div id="container" style=" height: 100px;
width: 100px;
overflow: hidden;
background-color:red;">
<a class="well-link" href="">Test</a>
<div id="triangle-topleft" style="width: 0;
height: 0;
border-top: 100px solid gray;
border-right: 100px solid transparent;">
</div>
</div>
</body>
</html>
I want to create div like the image i have uploaded using CSS /HTML and Jquery
Please help me
I have tried this.. but not able to get text on center
You could simply achieve that by using :after pseudo-element and CSS transform property like this:
.div {
position: relative;
height: 100px;
width: 100px;
overflow: hidden;
background-color: red;
border: 5px solid #000;
color: #fff;
text-align: center;
line-height: 100px;
z-index: -2;
}
.div:before {
content:'';
position: absolute;
left: 20%;
width: 100%;
height: 200%;
background-color: green;
top: 0;
border-left: 5px solid #000;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
z-index: -1;
}
<div class="div">
<a>1</a>
</div>
Rect with linear gradient
using a single liner gradient you can create this shape.
.rect {
position: relative;
border: 5px solid black;
background-image: linear-gradient(-45deg, firebrick 47%, black 47.5%, black 53%, green 53.5%);
height: 100px;
width: 100px;
}
.rect a {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-size: 2em;
color: white;
}
<div class="rect">
<a>1</a>
</div>
Related
I'm trying to create an icon like this :
Here is my code :
<head>
<style type="text/css">
.dot {
height: 500px;
width: 500px;
border-radius: 50%;
display: inline-block;
border: 10px solid red;
}
.square {
height: 353.55px;
width: 353.55px;
background-color: #6a6;
display: inline-block;
}
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
}
</style>
</head>
<body>
<div class="dot"></div>
<div class="square"></div>
<div class="triangle"></div>
</body>
But what I'm getting is this :
How can I make them overlap ?
tried z-index : 1 and 2 and 3, doesn't work
Try this:
maybe this is not exactly what you are looking for, but it might help.
<head>
<style type="text/css">
.wrapper {
position: relative;
height: 500px;
width: 500px;
transform: scale(0.25)
}
.dot {
height: 500px;
width: 500px;
border-radius: 50%;
display: inline-block;
border: 10px solid red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.square {
height: 353.55px;
width: 353.55px;
background-color: #6a6;
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.triangle {
width: 0;
height: 0;
border-left: 51px solid transparent;
border-right: 51px solid transparent;
border-bottom: 85px solid blue;
position: absolute;
left: 50%;
top: 16%;
transform-origin: center;
transform: translateX(-50%) scale(9);
}
</style>
</head>
<body>
<div class="wrapper">
<div class="triangle"></div>
<div class="dot"></div>
<div class="square"></div>
</div>
</body>
I believe that you are looking for something like this:
.dot {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
height: 332px;
width: 332px;
border-radius: 50%;
border: 10px solid red;
top: 148px;
left: 190px;
}
.square {
height: 235px;
width: 235px;
background-color: #6a6;
position: relative;
}
.square:after {
content: '';
position: absolute;
top: 8px;
left: 8px;
width: 0;
border-top: solid 110px white;
border-bottom: solid 110px white;
border-right: solid 110px white;
border-left: solid 110px white;
}
.triangle {
position: absolute;
height: 0;
width: 0;
display: flex;
justify-content: center;
align-items: center;
border-left: 358px solid transparent;
border-right: 358px solid transparent;
border-bottom: 500px solid blue;
z-index: -1;
}
.triangle::after {
content: '';
position: absolute;
top: 12px;
left: -340px;
width: 0;
border-bottom: solid 480px white;
border-right: solid 340px transparent;
border-left: solid 340px transparent;
}
<div class="triangle">
</div>
<div class="dot">
<div class="square"></div>
</div>
Use absolute positioning and reorder the divs. here is what I did, the sizes are wrong but they are overlapping:
<head>
<style type="text/css">
.dot {
height: 500px;
width: 500px;
border-radius: 50%;
display: inline-block;
border: 10px solid red;
position:absolute;
top: 140px;
left: 130px;
}
.square {
height: 353.55px;
width: 353.55px;
background-color: #6a6;
display: inline-block;
position:absolute;
top: 224px;
left: 214px;
}
.triangle {
width: 0;
height: 0;
border-left: 400px solid transparent;
border-right: 400px solid transparent;
border-bottom: 800px solid blue;
position:absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<div class="triangle"></div>
<div class="dot"></div>
<div class="square"></div>
</body>
![Here is the result][1]
[1]: https://i.stack.imgur.com/85Ztd.png
I'm working on a 'arrow'-div. It currently looks like this:
the div contains two other divs(two lines). And I want that the background is nearly wrapped around the lines. But the height of the yellow-background is a lot smaller than the height of the lines. I already tried 'height: auto'. I hope someone could help me out.
#lineAll {
background-color: yellow;
height: auto;
}
#line1 {
height: 2px;
background-color: black;
transform: rotate(35deg);
width: 40px;
}
#line2 {
height: 2px;
background-color: black;
transform: rotate(-35deg);
width: 40px;
margin-top: 20px;
}
<div id="lineAll">
<div id="line1"></div>
<div id="line2"></div>
</div>
edit:
The width is also not the way I want it. It's currently 100%-width of the screen.
Try this:
<div style="background-color : yellow; padding: 15px 0px; width: 40px;">
<div id="lineAll">
<div id="line1"></div>
<div id="line2"></div>
</div>
</div>
<style>
#lineAll {
background-color: yellow;
height: auto;
}
#line1 {
height: 2px;
background-color: black;
transform: rotate(35deg);
width: 40px;
}
#line2 {
height: 2px;
background-color: black;
transform: rotate(-35deg);
width: 40px;
margin-top: 20px;
}
You can do this with one element and :after pseudo-element. Just create smaller pseudo-element that has border-top and border-right and then rotate it for 45deg.
.element {
width: 50px;
height: 60px;
background: yellow;
position: relative;
}
.element:after {
content: '';
position: absolute;
top: 15px;
border-top: 1px solid black;
border-right: 1px solid black;
height: 30px;
width: 30px;
transform: rotate(45deg);
}
<div class="element"></div>
To create other button just rotate for -135deg and set right: 0px
.element {
width: 50px;
height: 60px;
background: yellow;
position: relative;
display: inline-block;
margin: 50px;
}
.element:after {
content: '';
position: absolute;
top: 15px;
border-top: 1px solid black;
border-right: 1px solid black;
height: 30px;
width: 30px;
transform: rotate(45deg);
}
.element.right:after {
transform: rotate(-135deg);
right: 0px;
}
<div class="element"></div>
<div class="element right"></div>
Why don't you try drawing a triangle shape with css since it gives the same result you want to achieve
.triangle {
display: block;
width: 0;
height: 0;
border-top: 108px solid transparent;
border-right: 0 solid transparent;
border-bottom: 108px solid transparent;
border-left: 108px solid #4abdac;
}
<html>
<head></head>
<body>
<div class="triangle"></div>
</body>
</html>
Try this
#lineAll {
background-color: yellow;
height: auto;
padding: 10px 0;
}
live demo - https://jsfiddle.net/grinmax_/j4aza1om/
Just use
overflow: hidden;
display: inline-block;
#lineAll {
background-color: yellow;
overflow: hidden;
display: inline-block;
}
#line1 {
height: 2px;
background-color: black;
transform: rotate(35deg);
width: 40px;
}
#line2 {
height: 2px;
background-color: black;
transform: rotate(-35deg);
width: 40px;
margin-top: 20px;
}
<div id="lineAll">
<div id="line1"></div>
<div id="line2"></div>
</div>
Am trying to get a shape drawn in css on the header of my webpage. it supposed to look like this.
The shape am trying to draw for my header
but when I try to get the exact shape, IT looks like this below (Run the snippet)
Am not so good at css so am struggling here. The codes are below.
header {
padding: 0px !important;
height: auto !important;
}
.header {
top: 0px;
width: 100%;
height: auto !important;
padding: 0px !important;
background-color: #00ff00;
}
.spanheader {
font-size: 20px;
}
.logo {
z-index: 1;
position: relative;
}
.topheader {
text-align: center;
width: 100%;
background-color: lightgray;
left: 0px !important;
top: 0px !important;
}
#draw {
height: 30px;
width: 100%;
background-color: #fff;
}
#green {
height: 60px;
width: 100%;
border-width: 0px;
border-left: 280px solid white;
border-top: 20px solid white;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}
<section id="header" class="header">
<div class="topheader">
<span class="spanheader f-700 c-gray">HEADER</span>
</div>
<div id="draw"></div>
<div id="green"></div>
</section>
What Am trying to achieve with my header and shape drawing
final look I want to achieve or what it should should look like at the end
You can just create a small white rectangle at the left top, skew it and move it a little to the left to remove the green triangle:
.green {
background-color:#0f0;
height:60px;
width:100%;
}
.draw {
height:30px;
margin-left:-15%;
width:30%;
background-color:#fff;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}
<div class="green">
<div class="draw">
</div>
</div>
Try using :after. See this snippet.
header {
padding: 0px !important;
height: auto !important;
}
.header {
top: 0px;
width: 100%;
height: auto !important;
padding: 0px !important;
background-color: #00ff00;
}
.spanheader {
font-size: 20px;
}
.logo {
z-index: 1;
position: relative;
}
.topheader {
text-align: center;
width: 100%;
background-color: lightgray;
left: 0px !important;
top: 0px !important;
}
#draw {
height: 30px;
width: 100%;
background-color: #fff;
}
#green {
height: 60px;
width: 100%;
border-width: 0px;
position:relative;
}
#green:after{
content:'';
position:absolute;
top:0;
left:-25px;
height:30px;
width:250px;
background:white;
-moz-transform: skew(-60deg);
-webkit-transform: skew(-60deg);
transform: skew(-60deg);
}
<html>
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!-- Mirrored from byrushan.com/projects/ma/1-6-1/jquery/light/login.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 14 Jun 2016 14:12:13 GMT -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WEBPAGE </title>
</head>
<body>
<section id="header" class="header">
<div class="topheader">
<span class="spanheader f-700 c-gray">HEADER</span>
</div>
<div id="draw">
</div>
<div id="green"></div>
</section>
</body>
</html>
Take a look at this JSFiddle
header{
text-align:center;
padding: 5px 0;
background: grey;
color: white;
}
footer{
text-align: center;
padding: 50px 0;
position: relative;
}
footer::before,footer::after{
content: '';
display: inline-block;
width: 70%;
height: 50px;
background: green;
position: absolute;
bottom: 0;
right: -10px;
transform: skewX(-30deg);
}
footer::after{
width: 100%;
height: 30px;
transform: skewX(0);
}
#header {
width: 100%;
height: 30px;
background: #CCC;
text-align: center;
line-height: 30px;
}
#slashWrapper {
position: relative;
background: #FFF;
width: 100%;
height: 100px;
}
#whiteSlash {
height: 75px;
width: 300px;
background: #FFF;
position: absolute;
top: 0px;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
z-index: 2;
}
#greenSlash {
height: 50px;
width: 100%;
position: absolute;
bottom: 0px;
background: #00ff00;
}
#whiteSlashBottomCorner {
height: 25px;
width: 25px;
background: #FFF;
position: absolute;
bottom: 0px;
right: -25px;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
z-index: 2;
}
<div id="header">HEADER</div>
<div id="slashWrapper">
<div id="whiteSlash"></div>
<div id="greenSlash"></div>
<div id="whiteSlashBottomCorner">
</div>
How can I add the border to this geometric figure created in css?
I tried this, but it isn't working. the border looks like a square...
https://jsfiddle.net/asngxe77/
HTML:
<div align="center" class="orpos">
<div class="orstyle">
<div class="or">
</div>
</div>
</div>
CSS:
.orpos{
position: relative;
height: 100px;
width: 100px;
top: 50%;
margin-top: -50px;
left: 50%;
margin-left: -50px;
}
.orstyle{
border: solid 1px #505246;
}
.or {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: #272822;
position: relative;
top: -50px;
}
.or:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: #272822;
}
you could still use border, then transform and a gradient:
.orpos {
position: relative;
height: 100px;
width: 100px;
margin: auto;
overflow: hidden;
}
.orstyle {
border: solid 4px #505246;
/* set a background-color and draw the last border in bg */
background: linear-gradient(135deg, #505246 38%, transparent 38%) gold;
width: 60%;
height: 60%;
transform: rotate(45deg);
margin-top: -20%;
}
.or {
transform: rotate(-45deg);
margin-top: 38.5%;
/* to stay away from top border area */
}
/* demo purpose */
.orpos {
display: inline-block;
vertical-align: top;
}
.border1 {
border-width: 1px;
}
.border10 {
border-width: 10px;
}
.border5 {
border-width: 5px;
}
<div align="center" class="orpos">
<div class="orstyle border1">
<div class="or">
OR
<!-- was text meant to be here ? -->
</div>
</div>
</div>
<div align="center" class="orpos">
<div class="orstyle">
<div class="or">
OR
<!-- was text meant to be here ? -->
</div>
</div>
</div>
<div align="center" class="orpos">
<div class="orstyle border10">
<div class="or">
OR
<!-- was text meant to be here ? -->
</div>
</div>
</div>
<div align="center" class="orpos">
<div class="orstyle border5">
<div class="or">
OR
<!-- was text meant to be here ? -->
</div>
</div>
</div>
from code demo on css-tricks website for the diamond square :
#diamond {
margin: 1em;
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: red;
position: relative;
top: -50px;
}
#diamond:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: red;
}
#diamond:before {
content: '';
position: absolute;
height: 80px;
width: 80px;
background: gray;
transform: rotate(45deg);
left: -40px;
top: 10px;
z-index: -1;
}
#diamond:hover:before {
box-shadow: inset 0 0 0 3px green, 0 0 0 3px;
/* more borders border ?*/
border-radius: 4px;
background:white
}
<p>Hover the diamond and see some extra css effects to draw a three color rounded borders</p>
<div id="diamond"></div>
I am using border-radius property to acheive rounded corners. But I am not sure how to get rounded corners of this shape. I tried giving same dimensions from either sides but they just dont give me the exact shape. Am I missing some CSS3 property here.
Just wondering if clip css property is the answer.
UPDATE:
http://jsfiddle.net/YWnzc/136/
Demo
#player {
margin: 32px;
position: relative;
width: 400px;
height: 250px;
background-color: #222;
}
#inner {
transform: rotate(45deg);
background-color: silver;
width: 100px;
height: 100px;
top: 20px;
left: -50px;
position: relative;
border-radius: 20px;
}
#outer {
position: absolute;
top: 50px;
left: 165px;
width: 70px;
height: 140px;
overflow: hidden;
}
<div id="player">
<div id="outer">
<div id="inner"></div>
</div>
</div>
This should produce:
The effect is achieved by creating a square, rotating it with a CSS transform, rounding the corners, and clipping it with an outer box. The inner element can be adjusted as desired, so it is somewhat flexible.
http://css3shapes.com/ has some nice examples (note the heart at the bottom of the page)
Alternatives
SVG images support shapes of this type and are supported in all modern browsers. Simple SVGs can be coded by hand as XML, and there are a variety of free/paid editors for working with them.
See also: Raphaël, a library for working with vector graphics on the web
Triangles in different sizes with border radius
To flip or to change vertical alignment fork translateY() and rotate()
/*triangle background large*/
.triangle-bg-lg, .triangle-bg-lg:before, .triangle-bg-lg:after { width: 25em; height: 25em; }
/*triangle background medium*/
.triangle-bg-md, .triangle-bg-md:before, .triangle-bg-md:after { width: 20em; height: 20em; }
/*triangle background small*/
.triangle-bg-sm, .triangle-bg-sm:before, .triangle-bg-sm:after { width: 15em; height: 15em; }
/*triangle background extra small*/
.triangle-bg-xs, .triangle-bg-xs:before, .triangle-bg-xs:after { width: 10em; height: 10em; }
/*triangle background extra extra small*/
.triangle-bg-xxs, .triangle-bg-xxs:before, .triangle-bg-xxs:after { width: 5em; height: 5em; }
/*common triangle style*/
.triangle-bg-lg,.triangle-bg-md, .triangle-bg-sm,.triangle-bg-xs,.triangle-bg-xxs {
overflow: hidden;
position: relative;
margin:2em auto;
border-radius: 20%;
transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(.866);
}
.triangle-bg-lg:before, .triangle-bg-lg:after,.triangle-bg-md:before, .triangle-bg-md:after, .triangle-bg-sm:before, .triangle-bg-sm:after,.triangle-bg-xxs:before, .triangle-bg-xxs:after{
position: absolute;
background: #ccc;
pointer-events: auto;
content: '';
}
.triangle-bg-xs:before, .triangle-bg-xs:after{
background: #ccc;
position: absolute;
pointer-events: auto;
content: '';
}
.triangle-bg-lg:before, .triangle-bg-md:before, .triangle-bg-sm:before, .triangle-bg-xs:before,.triangle-bg-xxs:before {
border-radius: 20% 20% 20% 53%;
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%)
skewX(30deg) scaleY(.866) translateX(-24%);
}
.triangle-bg-lg:after, .triangle-bg-md:after,.triangle-bg-sm:after,.triangle-bg-xs:after,.triangle-bg-xxs:after {
border-radius: 20% 20% 53% 20%;
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%)
skewX(-30deg) scaleY(.866) translateX(24%);
}
<div class="page-container">
<div class="triangle-bg-lg"></div>
<div class="triangle-bg-md"></div>
<div class="triangle-bg-sm"></div>
<div class="triangle-bg-xs"></div>
<div class="triangle-bg-xxs"></div>
</div>
If I have understood your question properly. I think you can use something like below:
CSS:
#box{ border-color: transparent transparent transparent #FFFFFF;
border-style: solid;
border-width: 50px 0 50px 75px;
height: 0;
left: -40px;
margin: 40px;
position: absolute;
width: 0;
}
#outerbox{ background:red;
height: 300px;
position: relative;
width: 122px;
}
HTML
<div id="outerbox"><div id="box"></div></div>
LIVE DEMO
http://jsfiddle.net/fsGQR//
<!DOCTYPE html>
<html>
<head>
<style>
.trio {position:absolute;}
.trio .triangle {
position: relative;
background-color: #DB524B;
text-align: left;
}
.trio .triangle:before,
.trio .triangle:after {
content: '';
position: absolute;
background-color: inherit;
}
.trio .triangle,
.trio .triangle:before,
.trio .triangle:after {
width: 3em;
height: 3em;
border-top-right-radius: 33%;
}
.trio .triangle {
transform: rotate(-60deg) skewX(-30deg) scale(1,.866);
}
.trio .triangle:before {
transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.trio .triangle:after {
transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}
.trio .exclamation{
color: #DB524B;
position:absolute;
font-size:50px;
top:8px;
left:15px;
z-index:2;
}
.trio .triangle.tri-in {
background-color: #fff;
margin-top: -2.9em;
margin-left: 1px;
}
.trio .tri-in,
.trio .tri-in:before,
.trio .tri-in:after {
width: 2.9em;
height: 2.9em;
border-top-right-radius: 33%;
}
/* styles below for demonstration purposes only */
body { padding: 30%; }
</style>
</head>
<body>
<div class="trio">
<span class="exclamation">!</span>
<div class='triangle'></div>
<div class='triangle tri-in'></div>
</div>
</body>
</html>
This is even better
CSS
.c1 {
width:50px;
height:50px;
background-color:yellow;
-webkit-transform:rotate(45deg);
position: relative;
top: -65px;
left: 25px;
z-index:-1;
border: 2px solid rgba(0,255,0,.6);
}
.c2 {
width: 50px;
height: 72px;
background-color: yellow;
z-index: 10000;
border: 2px solid rgba(0,255,0,.6);
border-right: 0;
}
HTML
<div class="c2">Hello</div>
<div class="c1"></div>
DEMO: http://jsfiddle.net/YWnzc/237/
I used this for add triagle to link:
.review-box_left-link:after{
content: '';
position: absolute;
width: 19px;
height: 19px;
background: #2195DB;
border-radius: 2px;
transform: rotate(-45deg);
background: linear-gradient(to right bottom, white 0%,white 50%,#2195DB 50%,#2195DB 50%,#2195DB 100%);
}