Make div stay inside another

Asked

Viewed 235 times

1

I am good in HTML but from yesterday to today something has been breaking my head and so far not solved! I want the following result (edited in PS): inserir a descrição da imagem aqui but, as it is getting: inserir a descrição da imagem aqui Here my code:

<div style="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>
html css

1 answer

0


Young man is just you put overflow:hidden at first div that comes out of all the elements, tb needs to make an adjustment in the past width of 400px for 450px wide!

See how it looks:

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>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.