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
Related
here is image .
i want border like this.
You can try something like this:
#mainDiv {
height: 100px;
width: 80px;
position: relative;
background: grey;
}
.bottom-left-corner {
margin: -5px;
border-left: 1px solid orange;
border-bottom: 1px solid orange;
position: absolute;
top: 25%;
bottom: 0;
right: 25%;
left: 0;
}
.top-right-corner {
margin: -5px;
border-right: 1px solid #aaaafa;
border-top: 1px solid #aaaafa;
position: absolute;
top: 0;
bottom: 25%;
right: 0;
left: 25%;
}
<div id="mainDiv">
<div class="bottom-left-corner"></div>
<div class="top-right-corner"></div>
</div>
Regards,
How about something like this?
http://codepen.io/anon/pen/GWrzPX
<div class="image">
<img src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png">
<span class="blue"></span>
<span class="red"></span>
</div>
.image{position:relative;width:200px;height:200px}
.red{position:absolute;top:0px;right:0px;margin-right:0px;width:50%;height:50%;background:red;}
.blue{position:absolute;bottom:0px;left:0px;width:50%;height:50%;background:blue}
img{background:#fff;position:absolute;z-index:100;padding:0px;margin:1px;width:198px;height:198px;}
HTML
<div class="example">
<div>
<img src="http://www.seowordpress.pl/wp-content/plugins/all-in-one-seo-pack/images/default-user-image.png">
</div>
</div>
CSS
.example {
position: relative;
width: 200px;
height: 200px;
padding: 5%;
}
img {
width: 100%;
}
.example:after {
position:absolute;
width: 120px;
height: 120px;
border: solid orange;
content: ' ';
}
.example>:first-child:after {
position: absolute;
width: 120px;
height: 120px;
border: solid lightblue;
content: ' ';
}
.example:after {
right:0;
top:0;
border-width: 2px 2px 0 0;
}
.example>:first-child:after {
left: 0;
bottom: 0;
border-width: 0 0 2px 2px;
}
https://jsfiddle.net/xcanndy/t1wa825f/
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>
I have this box with an arrow:
#div1 {
position: fixed;
width: 140px;
min-height: 100px;
max-height: 400px;
background: #fff;
color: #000;
border: 1px solid #ccc;
//border-top:none;
z-index: 3000;
}
#div1:before {
content: "";
vertical-align: middle;
margin: auto;
position: absolute;
left: 0;
right: 0;
bottom: 100%;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #fff;
}
<div id=div1></div>
I want the arrow to have the same border as #div1 (1px solid #ccc) but it is white.
Any ideas how can I add a border color in the arrow?
JSFiddle
#div1 {
position: relative;
width: 140px;
min-height:100px;
max-height:400px;
background: #fff;
color: #000;
border:1px solid #ccc;
z-index:3000;
margin: 3rem;
}
#div1:before {
content: "";
vertical-align: middle;
margin: auto;
position: absolute;
display: block;
left: 0;
right: 0;
bottom: calc(100% - 6px);
width: 12px;
height: 12px;
transform: rotate(45deg);
border: 1px solid;
border-color: #ccc transparent transparent #ccc;
background-color: white;
}
<div id=div1></div>
I've modified your code a bit, but I think I've got your desired output
FIDDLE
#div1 {
position: fixed;
width: 140px;
min-height: 100px;
max-height: 400px;
background: #fff;
color: #000;
border: 1px solid #ccc;
}
#div1:before {
content: '';
vertical-align: middle;
margin: auto;
position: absolute;
left: 0;
right: 0;
bottom: 93%;
width: 15px;
height: 15px;
background: #fff;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
<br>
<div id="div1"></div>
I want the border div to be "hidden" behind the circle and not cross through it. I thought z-index was the way to do things like this.
Any ideas?
JSFIDDLE: http://jsfiddle.net/qs5xmege/1/
CSS and HTML
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
width:22px;
height:22px;
border-radius:11px;
border: 3px solid red;
background-color: #FFF;
margin: 30px auto 0 auto;
z-index: 100;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Give .circle a position:relative, z-index works only with position:relative, position:absolute or position: fixed
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
width:22px;
height:22px;
border-radius:11px;
border: 3px solid red;
background-color: #FFF;
margin: 30px auto 0 auto;
position: relative;
z-index: 100;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Add position:relative; to .circle.
z-index need relative, absolute or fixed vaue for position.
Set position:relative of div circle and z-index:2 ie. 1 more than border is enough
.circle {
background-color: #FFFFFF;
border: 3px solid #FF0000;
border-radius: 11px;
height: 22px;
margin: 30px auto 0;
position: relative;
width: 22px;
z-index: 2;
}
Snippet
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
background-color: #FFFFFF;
border: 3px solid #FF0000;
border-radius: 11px;
height: 22px;
margin: 30px auto 0;
position: relative;
width: 22px;
z-index: 2;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Try like this:
.circle {
background-color: #fff;
border: 3px solid red;
border-radius: 11px;
display: block;
height: 22px;
margin: 0 auto;
position: relative;
top: -68px;
width: 22px;
}
.border {
border-right: thin solid black;
height: 100px;
width: 50%;
}
please help to draw a pentagon means css.
I definitely need to pentagon could completely fill the text. The text should not extend beyond the pentagon (overflow:hidden).
html:
<div class="carousel_gallery" id="carousel_gallery">
укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>
</div>
css:
body{
position: relative;
}
.carousel_gallery {
width: 360px;
height: 365px;
position: absolute;
top: 0px;
left: 50%;
margin-left: -185px;
border: 1px solid red;
overflow: hidden;
}
.carousel_gallery:before {
content: "";
width: 255px;
height: 255px;
margin-left: 52px;
margin-top: 237px;
position: absolute;
border-bottom: 1px solid red;
border-right: 1px solid red;
-webkit-transform: rotate(45deg);
background: white;
}
fiddle
customize this pentagon..hope this will help you!
<style type="text/css">
#pentagon {
margin:70px 0 5px 20px;
position: relative;
width: 110px;
border-width: 100px 36px 0;
border-style: solid;
border-color: #abefcd transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -170px;
left: -36px;
border-width: 0 90px 70px;
border-style: solid;
border-color: transparent transparent #abefcd;
}
/* Content in pentagon */
#pentagon div{
position:absolute;
top:-50px;
}
</style>
<div id="pentagon"><div>you text</div></div>