.seven_number {
position: absolute;
right: 147px;
top: 25px;
width: 14px;
}
.seven_number:after {
content: "";
height: 5px;
width: 20px;
position: absolute;
background: #c6c6c6;
top: 0px;
left: -2px;
}
.seven_number:before {
content: "";
height: 27px;
width: 5px;
position: absolute;
background: #c6c6c6;
top: 0px;
right: 0px;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
<div class="seven_number"></div>
This code is to draw a 7 with css like this https://i.stack.imgur.com/QVBXi.png
Can anyone help me draw an 8 like that please?
You can use this style as example:
.eight_number {
position: absolute;
right: 187px;
top: 25px;
width: 14px;
}
.eight_number:after {
content: "";
height: 6px;
width: 6px;
position: absolute;
top: 0px;
border-radius: 50%;
background-color:#fff;
border:4px solid #c6c6c6;
}
.eight_number:before {
content: "";
height: 10px;
width: 10px;
position: absolute;
top: 10px;
left:-2px;
border-radius: 50%;
background-color:#fff;
border:4px solid #c6c6c6;
}
<div class="eight_number"></div>
See in playground: https://jsfiddle.net/denisstukalov/egv64dk7/16/#&togetherjs=ivslT1OqpI
Related
https://codepen.io/oli-oli-oxen-free/pen/XExzQJ
.button{
position: absolute;
height:25px;
width: 40px;
top: 290px;
left: 725px;
right: -420px;
bottom: -191px;
}
I have tried messing with the padding and margins
Looks like you are aligning everything in the centre of your page but you align the button 725px from the left of your page
What you need to do is position the div holding the button and then put text-align:center on that div:
myFunction = () => {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
.Box {
position: relative;
margin: auto;
display: block;
border: solid 4px skyBlue;
margin-top: 2%;
width: 600px;
height: 450px;
background: none;
z-index: -1
}
.tittle {
text-align: center;
font-family: 'courier new', Courier, monospace;
}
.speech-buble-top {
position: relative;
display: block;
border: solid 4px black;
top: -15%;
left: ;
width: 200px;
height: 100px;
background: white;
border-radius: 50%;
text-align: center
}
#h3 {
position: absolute;
text-align: center;
vertical-align: center;
width: 90%;
height: 80%;
left: 10px;
font-size: 25px;
background: none;
border: none;
border-radius: 5px;
}
.speech-buble-bottom {
position: relative;
display: triangle;
border-right: solid 4px black;
border-bottom: solid 4px black;
top: -23.5%;
left: 30%;
width: 15px;
height: 20px;
background: white;
z-index: 1;
transform: rotate(13deg);
}
.balloon-1 {
position: absolute;
top: -2%;
left: 70%;
width: 100px;
height: 110px;
background: red;
border-radius: 50%;
z-index: 1;
}
.balloon-bottom-1 {
position: absolute;
top: 22%;
left: 76%;
height: 0;
width: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: transparent;
border-bottom: 15px solid red;
z-inedx: 1;
}
.balloon-string-1 {
position: absolute;
top: 29.5%;
left: 69%;
width: 80px;
height: 20px;
border: solid 6px #000;
border-color: #000 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
border-radius: 50%;
border-right: solid 5px black;
transform: rotate(100deg);
z-inedx: -1;
}
.balloon-2 {
position: absolute;
top: -8%;
left: 75%;
width: 100px;
height: 110px;
background: #228B22;
border-radius: 50%;
z-index: -1;
}
.balloon-string-2 {
position: absolute;
top: 26%;
left: 69%;
width: 110px;
height: 20px;
border: solid 6px #000;
border-color: #000 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
border-radius: 50%;
border-right: solid 5px black;
transform: rotate(115deg);
z-inedx: -1;
}
.balloon-3 {
position: absolute;
top: -4%;
left: 78%;
width: 100px;
height: 110px;
background: #9400D3;
border-radius: 50%;
z-index: -1;
}
.balloon-bottom-3 {
position: absolute;
top: 20%;
left: 84%;
height: 0;
width: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: transparent;
border-bottom: 15px solid #9400D3;
}
.balloon-string-3 {
position: absolute;
top: 29%;
left: 71%;
width: 110px;
height: 20px;
border: solid 6px #000;
border-color: #000 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
border-radius: 50%;
border-right: solid 5px black;
transform: rotate(120deg);
z-inedx: -1;
}
.balloon-4 {
position: absolute;
top: -2%;
left: 85%;
width: 100px;
height: 110px;
background: #FFD700;
border-radius: 50%;
z-index: 1;
}
.balloon-bottom-4 {
position: absolute;
top: 22%;
left: 91%;
height: 0;
width: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: transparent;
border-bottom: 15px solid #FFD700;
}
.balloon-string-4 {
position: absolute;
top: 29.5%;
left: 73%;
width: 130px;
height: 20px;
border: solid 6px #000;
border-color: #000 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
border-radius: 50%;
border-right: solid 5px black;
transform: rotate(140deg);
z-inedx: -1;
}
.head {
position: absolute;
top: 5%;
left: 40%;
width: 125px;
height: 135px;
background: pink;
border-radius: 5px;
}
.l-lash-1 {
position: absolute;
top: 10%;
left: 28%;
width: 3%;
height: 8%;
background: black;
transform: rotate(-50deg)
}
.l-lash-2 {
position: absolute;
top: 8%;
left: 30%;
width: 3%;
height: 8%;
background: black;
transform: rotate(-30deg)
}
.l-lash-3 {
position: absolute;
top: 8%;
left: 33%;
width: 3%;
height: 6%;
background: black;
transform: rotate(-20deg)
}
.r-lash-1 {
position: absolute;
top: 10%;
left: 75%;
width: 3%;
height: 8%;
background: black;
transform: rotate(50deg)
}
.r-lash-2 {
position: absolute;
top: 8%;
left: 73%;
width: 3%;
height: 8%;
background: black;
transform: rotate(30deg)
}
.r-lash-3 {
position: absolute;
top: 8%;
left: 70%;
width: 3%;
height: 6%;
background: black;
transform: rotate(20deg)
}
.eye-left {
position: absolute;
top: 15px;
left: 35px;
width: 30px;
height: 50px;
background: white;
border-radius: 50%;
border-left: solid 3px lightGrey;
}
.eye-right {
position: absolute;
top: 15px;
left: 66px;
width: 30px;
height: 50px;
background: white;
border-radius: 5px;
border-radius: 50%;
border-left: solid 3px lightGrey;
}
.inner-eye-left {
position: absolute;
top: 15%;
left: 19%;
width: 42%;
height: 45%;
background: black;
border-radius: 50%;
border-left: solid 9px darkOliveGreen;
border-top: solid 9px darkOliveGreen;
border-bottom: solid 9px darkOliveGreen;
}
.inner-eye-right {
position: absolute;
top: 15%;
left: 0%;
width: 42%;
height: 45%;
background: black;
border-radius: 50%;
border-left: solid 9px darkOliveGreen;
border-top: solid 9px darkOliveGreen;
border-bottom: solid 9px darkOliveGreen;
}
.pupil-left {
position: absolute;
top: 15%;
left: 15%;
width: 42%;
height: 35%;
background: white;
border-radius: 50%;
}
.pupil-right {
position: absolute;
top: 15%;
left: 10%;
width: 35%;
height: 30%;
background: white;
border-radius: 50%;
}
.hair-left {
position: absolute;
top: -25%;
left: 45%;
width: 5%;
height: 30%;
background: pink;
transform: rotate(-30deg)
}
.hair-right {
position: absolute;
top: -18%;
left: 60%;
width: 5%;
height: 25%;
background: pink;
transform: rotate(30deg)
}
.hair-top-left {
position: absolute;
top: -30%;
left: 32%;
width: 15%;
height: 13%;
background: pink;
border-radius: 50%;
}
.hair-top-right {
position: absolute;
top: -25%;
left: 65%;
width: 15%;
height: 13%;
background: pink;
border-radius: 50%;
}
.mouth-top {
position: absolute;
top: 60%;
left: 29%;
width: 50%;
height: 17%;
background: pink;
border-radius: 50%;
z-index: 1;
}
.mouth {
position: absolute;
top: 61%;
left: 29%;
width: 50%;
height: 17%;
background: none;
border-radius: 50%;
border-bottom: solid 4px black;
}
.ear-bar-1 {
position: absolute;
top: 34%;
left: -9%;
width: 120%;
height: 31%;
background: lightGrey;
z-index: -1;
}
.ear-bar-2 {
position: absolute;
top: 40%;
left: -18%;
width: 140%;
height: 19%;
background: pink;
z-index: -2;
}
.ear-bar-3 {
position: absolute;
top: 45%;
left: -25%;
width: 155%;
height: 10%;
background: lightGrey;
z-index: -3;
}
.ear-left-circle {
position: absolute;
top: 41%;
left: -37%;
width: 17%;
height: 17%;
background: pink;
border-radius: 50%
}
.ear-right-circle {
position: absolute;
top: 41%;
left: 125%;
width: 17%;
height: 17%;
background: pink;
border-radius: 50%
}
.neck {
position: absolute;
top: 100%;
left: 26.5%;
width: 50%;
height: 12%;
background: lightGrey;
border-radius: 5px
}
.button-holder {
position: absolute;
height: 25px;
top: 290px;
left: 0;
width:100%;
text-align: center;
}
.upper-body {
position: absolute;
top: 110%;
left: -15%;
width: 130%;
height: 125%;
background: pink;
border-radius: 5px;
z-index: +1
}
.bullet-1 {
position: absolute;
top: 5%;
left: 5%;
width: 8%;
height: 8%;
background: lightGrey;
border-radius: 50%
}
.bullet-2 {
position: absolute;
top: 5%;
left: 88%;
width: 8%;
height: 8%;
background: lightGrey;
border-radius: 50%
}
.bullet-3 {
position: absolute;
top: 88%;
left: 5%;
width: 8%;
height: 8%;
background: lightGrey;
border-radius: 50%
}
.bullet-4 {
position: absolute;
top: 88%;
left: 88%;
width: 8%;
height: 8%;
background: lightGrey;
border-radius: 50%
}
.heart-left {
position: absolute;
top: 20%;
left: 68%;
width: 8%;
height: 15%;
background: red;
border-radius: 50%;
transform: rotate(-25deg)
}
.heart-right {
position: absolute;
top: 20%;
left: 72%;
width: 8%;
height: 15%;
background: red;
border-radius: 50%;
transform: rotate(25deg)
}
.hand-left {
position: absolute;
top: 132%;
left: -85%;
width: 80%;
height: 20%;
background: pink;
transform: rotate(30deg);
z-index: -1;
}
.hand-right {
position: absolute;
top: 132%;
left: 100%;
width: 80%;
height: 20%;
background: pink;
transform: rotate(-35deg);
z-index: 1;
}
.h-line-1 {
position: absolute;
top: 34%;
left: 1%;
width: 35%;
height: 38%;
background: lightGrey;
transform: rotate(90deg);
z-index: -1;
}
.h-line-2 {
position: absolute;
top: 34%;
left: 20%;
width: 35%;
height: 38%;
background: lightGrey;
transform: rotate(90deg);
z-index: -1;
}
.h-line-3 {
position: absolute;
top: 34%;
left: 40%;
width: 35%;
height: 38%;
background: lightGrey;
transform: rotate(90deg);
z-index: -1;
}
.h-line-4 {
position: absolute;
top: 34%;
left: 60%;
width: 35%;
height: 38%;
background: lightGrey;
transform: rotate(90deg);
z-index: -1;
}
.palm-left {
position: absolute;
top: 0%;
left: -30%;
width: 42%;
height: 60%;
background: none;
border-top: solid 14px lightGrey;
border-radius: 50%;
transform: rotate(90deg);
}
.palm-right {
position: absolute;
top: 0%;
left: 85%;
width: 42%;
height: 60%;
background: none;
border-top: solid 14px lightGrey;
border-radius: 50%;
transform: rotate(270deg);
}
.left-leg {
position: absolute;
top: 235%;
left: 0%;
width: 35%;
height: 80%;
background: pink;
z-index: -1;
}
.right-leg {
position: absolute;
top: 235%;
left: 68%;
width: 35%;
height: 80%;
background: pink;
z-index: -1;
}
.l-line-1 {
position: absolute;
top: 0%;
left: 37%;
width: 25%;
height: 50%;
background: lightGrey;
transform: rotate(90deg);
z-index: -1;
}
.l-line-2 {
position: absolute;
top: 20%;
left: 37%;
width: 25%;
height: 50%;
background: lightGrey;
transform: rotate(90deg);
z-index: 1;
}
.l-line-3 {
position: absolute;
top: 40%;
left: 37%;
width: 25%;
height: 50%;
background: lightGrey;
transform: rotate(90deg);
z-index: 1;
}
.shoe-left {
position: absolute;
top: 90%;
left: -10%;
width: 120%;
height: 20%;
background: none;
border-top: solid 18px lightGrey;
border-radius: 50%;
z-index: +1
}
.shoe-right {
position: absolute;
top: 90%;
left: -10%;
width: 120%;
height: 20%;
background: none;
border-top: solid 18px lightGrey;
border-radius: 50%;
z-index: +1
}
<h1 class="tittle">Robot</h1>
<div class="button-holder"><button class="button" onclick="myFunction()">Click Me</button></div>
<div class="Box">
<div class="speech-buble-top">
<div id="myDIV" style="display: none">
<h3 id="h3"> Happy Birthday Tiffany!</h3>
</div>
</div>
<div class="speech-buble-bottom"></div>
<div class="balloon-1"></div>
<div class="balloon-2"></div>
<div class="balloon-3"></div>
<div class="balloon-4"></div>
<div class="balloon-bottom-1"></div>
<div class="balloon-bottom-3"></div>
<div class="balloon-bottom-4"></div>
<div class="balloon-string-1"></div>
<div class="balloon-string-2"></div>
<div class="balloon-string-3"></div>
<div class="balloon-string-4"></div>
<div class="head">
<div class="eye-left">
<div class="inner-eye-left"></div>
<div class="pupil-left"></div>
</div>
<div class="eye-right">
<div class="inner-eye-right"></div>
<div class="pupil-right"></div>
</div>
<div class="l-lash-1"></div>
<div class="l-lash-2"></div>
<div class="l-lash-3"></div>
<div class="r-lash-1"></div>
<div class="r-lash-2"></div>
<div class="r-lash-3"></div>
<div class="hair-left"></div>
<div class="hair-right"></div>
<div class="hair-top-left"></div>
<div class="hair-top-right"></div>
<div class="mouth-top"></div>
<div class="mouth"></div>
<div class="ear-bar-1"></div>
<div class="ear-bar-2"></div>
<div class="ear-bar-3"></div>
<div class="ear-left-circle"></div>
<div class="ear-right-circle"></div>
<div class="neck"></div>
<div class="upper-body">
<div class="bullet-1"></div>
<div class="bullet-2"></div>
<div class="bullet-3"></div>
<div class="bullet-4"></div>
<div class="heart-left"></div>
<div class="heart-right"></div>
<div class="bullet-center"></div>
</div>
<div class="hand-left">
<div class="h-line-1"></div>
<div class="h-line-2"></div>
<div class="h-line-3"></div>
<div class="h-line-4"></div>
<div class="palm-left"></div>
</div>
<div class="hand-right">
<div class="h-line-1"></div>
<div class="h-line-2"></div>
<div class="h-line-3"></div>
<div class="h-line-4"></div>
<div class="palm-right"></div>
</div>
<div class="left-leg">
<div class="l-line-1"></div>
<div class="l-line-2"></div>
<div class="l-line-3"></div>
<div class="shoe-left"></div>
</div>
<div class="right-leg">
<div class="l-line-1"></div>
<div class="l-line-2"></div>
<div class="l-line-3"></div>
<div class="shoe-right"></div>
</div>
</div>
<!--end of head-->
</div>
In the above, I have added a class of button-holder to your div. Removed the css for button and added css for the new div
I have been watching a tutorial on jQuery and he already had the css file made before but his output looks different than what I have when I downloaded the file
his:
The way it should be
Mine:
The code:
#navArrows {
position: relative;
width: 150px;
height: 150px;
margin: 100px auto 0;
background: #333;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
padding: 20px;
}
.navigationArrow {
width: 50px;
height: 50px;
line-height: 50px;
padding: 0;
margin: 0;
position: absolute;
top: 20px;
left: 20px;
background: white;
color: #222;
}
#up {
left: 50%;
margin-left: -25px;
}
#left, #right {
bottom: 50%;
margin-top: -25px;
}
#left, {
right: 20%;
left: inherit;
}
#right {
left: 20%;
right: inherit;
}
#down {
bottom: 20px;
top: inherit;
left: 50%;
margin-left: 5px;
}
.box {
height: 100px;
width: 100px;
background: #a7f;
color: white;
border: solid 4px #a1f;
line-height: 100px;
margin: 100px auto 0;
opacity: 0.5;
position: relative;
}
How do I fix this, please let me know.
ps: i added one part of the code that was missing from the original question, hope this helps.
It was better if you was add the markup as well. However see the following example and make correction according it. Hope it will work for you.
#navArrows {
position: relative;
width: 150px;
height: 150px;
margin: 100px auto 0;
background: #333;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 100px;
padding: 20px;
}
.navigationArrow {
width: 50px;
height: 50px;
line-height: 50px;
padding: 0;
margin: 0;
position: absolute;
top: 20px;
left: 20px;
background: white;
color: #222;
}
#up {
left: 50%;
margin-left: -25px;
}
#left, #right {
top: 50%; // One of the key line
margin-top: -25px;
}
#right {
left: auto;
right: 20px;
}
#down {
bottom: 20px;
top: auto;
left: 50%;
margin-left: -25px;
}
.box {
height: 100px;
width: 100px;
background: #a7f;
color: white;
border: solid 4px #a1f;
line-height: 100px;
margin: 100px auto 0;
opacity: 0.5;
position: relative;
}
<div id="navArrows">
<div class="navigationArrow" id="up"></div>
<div class="navigationArrow" id="right"></div>
<div class="navigationArrow" id="down"></div>
<div class="navigationArrow" id="left"></div>
</div>
It looks like you have a comma after the #left class try replacing it with:
#left {
right: 20%;
left: inherit;
}
Try this one
#left {
left: 0;
}
In box1:after z-index:1; it does not work.
.box1 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
background-color: gray;
border-radius: 50%;
}
.box1:after {
content: '';
position: absolute;
left: -3.5px;
top: -3.5px;
width: 80%;
height: 80%;
border: 4px solid red;
border-radius: 50%;
z-index: -1;
}
<div class="box1"></div>
Does anyone know what the solution is?
you must to get help of :before, like this:
.box1 {
position: absolute;
left: 50%;
top: 50%;
width: 120px;
height:120px;
transform:translate(-50%,-50%);
}
.box1:before {
text-align: center;
line-height: 120px;
content: 'click';
position: absolute;
width: 100%;
height:100%;
background-color: gray;
border-radius: 50%;
}
.box1:after{
content: '';
position: absolute;
left: -3.5px;
top: -3.5px;
width: 80%;
height: 80%;
border:4px solid red;
border-radius: 50%;
z-index:-1;
}
<div class="box1"></div>
.line-8 {
width: 100px;
height: 1px;
background-color: orange;
position: relative;
left: 240px;
top: 15px;
margin-bottom: 35px;
}
How to make look like this
Try This:
.line-8 {
width: 100px;
height: 1px;
background-color: orange;
position:relative;
left: 240px;
top: 15px;
margin-bottom:35px;
}
.line-8:after {
position: absolute;
content: '';
width: 10px;
height: 10px;
border-radius: 100%;
background-color: orange;
right: 0;
top: 50%;
transform: translateY(-50%);
}
<div class="line-8"></div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
one of my website have a custom shape footer, is this possible to do purely in css? im going to apply this in a bootstrap container-fluid, so the shape should stretch to the container-fluid.
Thanks in advance!
FOOTER SCREENSHOT
UPDATED FOOTER
1.The Html code:
<div class="footer-outer">
<span class="footer-arrow"></span> <!-- This is for the top part of the background -->
<span class="footer-circle"></span> <!-- This is for the circle -->
<div class="footer-inner">
</div>
</div>
2.The CSS code:
body { padding: 0; margin: 0; }
.footer-outer { margin-top: 150px; height: 200px; background: #415061; position: relative; }
.footer-arrow { width: 0; height: 0; border-style: solid; border-width: 0 200px 100px 200px; border-color: transparent transparent #415061 transparent; position: absolute; top: -100px; left: 0; font-size: 0; line-height: 0; text-indent: -4000px; }
.footer-circle { position: absolute; left: 50%; border-radius: 50%; margin-left: -40px; top: -140px; width: 80px; height: 80px; background: #eee; font-size: 0; line-height: 0; text-indent: -4000px; }
.footer-circle:before { content: ''; width: 26px; height: 26px; margin-left: -15px; position: absolute; top: 26px; left: 50%; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); border-top: 2px solid #415061; border-left: 2px solid #415061; font-size: 0; line-height: 0; text-indent: -4000px; }
.footer-circle:after { content: ''; width: 2px; height: 40px; margin-left: -2px; position: absolute; top: 23px; left: 50%; background: #415061; font-size: 0; line-height: 0; text-indent: -4000px; }
.footer-inner { height: 300px; top: -100px; left: 0; right: 0; position: absolute; }
3.The jQuery code:
$(document).ready(function() {
stretchArrow();
});
$(window).resize(function(){
stretchArrow();
});
function stretchArrow(){
_width = Math.floor($(window).width() / 2);
$('.footer-arrow').css('border-width', '0 ' + _width + 'px 100px ' + _width + 'px');
}
4.If you want the arrow to be pointing down:
Change this CSS:
.footer-circle:before { content: ''; width: 26px; height: 26px; margin-left: -15px; position: absolute; top: 26px; left: 50%; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); border-top: 2px solid #415061; border-left: 2px solid #415061; font-size: 0; line-height: 0; text-indent: -4000px; }
.footer-circle:after { content: ''; width: 2px; height: 40px; margin-left: -2px; position: absolute; top: 23px; left: 50%; background: #415061; font-size: 0; line-height: 0; text-indent: -4000px; }
With this one:
.footer-circle:before { content: ''; width: 26px; height: 26px; margin-left: -15px; position: absolute; top: 28px; left: 50%; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); border-bottom: 2px solid #415061; border-right: 2px solid #415061; font-size: 0; line-height: 0; text-indent: -4000px; }
.footer-circle:after { content: ''; width: 2px; height: 40px; margin-left: -2px; position: absolute; top: 20px; left: 50%; background: #415061; font-size: 0; line-height: 0; text-indent: -4000px; }
Here is a working example: https://jsfiddle.net/874zxr6h/
And a working example for the arrow pointing down: https://jsfiddle.net/874zxr6h/1/