Make div stay inside another

Navigation
1

I'm good at HTML but from yesterday to today something has been breaking my mind and so far I have not solved it! I want the following result (edited in PS): buthowareyoudoing? Hereismycode:

<divstyle="width:400px;height:400px;position: relative">
<div style="width:400px;height:400px;position: absolute">
    <div id="bg">
            <div style="transform:rotate(10deg);"></div>
            <div style="transform:rotate(25deg);"></div>
            <div style="transform:rotate(40deg);"></div>
            <div style="transform:rotate(55deg);"></div>
            <div style="transform:rotate(70deg);"></div>
            <div style="transform:rotate(85deg);"></div>
            <div style="transform:rotate(100deg);"></div>
            <div style="transform:rotate(115deg);"></div>
            <div style="transform:rotate(130deg);"></div>
            <div style="transform:rotate(145deg);"></div>
            <div style="transform:rotate(160deg);"></div>
            <div style="transform:rotate(175deg);"></div>
    </div>
</div>
</div>


<style>
html{background:#222;}
body {width:800px;height:400px;background:#333;margin:0 auto;}
#bg div {
border-bottom:1px solid #AD9268;
position: absolute;
width: 500px;
height: 2px;
margin: auto;
bottom:0;top:0;
left: -15px; right: 0;
}
#bg {
position: relative;
overflow: hidden;
border-radius: 50%;
width: 465px;
height: 465px;
margin-top: -20px;
margin-left: -20px;
}
</style>
    
asked by anonymous 03.11.2018 / 17:51

1 answer

0

Young you just put overflow:hidden in the first div that comes from outside all elements, you must make an adjustment in the width width from 400px to 450px width!

Here's how: 

html {
    background: #222;
}

body {
    width: 800px;
    height: 400px;
    background: #333;
    margin: 0 auto;
}

#bg div {
    border-bottom: 1px solid #AD9268;
    position: absolute;
    width: 500px;
    height: 2px;
    margin: auto;
    bottom: 0;
    top: 0;
    left: -15px;
    right: 0;
}

#bg {
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    width: 465px;
    height: 465px;
    margin-top: -20px;
    margin-left: -20px;
}
<div style="width:450px;height:400px;position: relative; overflow: hidden;">
    <div style="width:400px;height:400px;position: absolute">
        <div id="bg">
            <div style="transform:rotate(10deg);"></div>
            <div style="transform:rotate(25deg);"></div>
            <div style="transform:rotate(40deg);"></div>
            <div style="transform:rotate(55deg);"></div>
            <div style="transform:rotate(70deg);"></div>
            <div style="transform:rotate(85deg);"></div>
            <div style="transform:rotate(100deg);"></div>
            <div style="transform:rotate(115deg);"></div>
            <div style="transform:rotate(130deg);"></div>
            <div style="transform:rotate(145deg);"></div>
            <div style="transform:rotate(160deg);"></div>
            <div style="transform:rotate(175deg);"></div>
        </div>
    </div>
</div>
    
03.11.2018 / 20:26
You have a syntax error in your SQL next to 'T FOREIGN_KEY_CHECKS = 0' on line 1 [closed] Mysql Date_ADD ranges in the same PHP code