使用HTML5画一个矿泉水瓶

29 阅读1分钟

"

.bottle { width: 200px; height: 400px; background-color: #00bfff; position: relative; } .bottle:before { content: \"\"; width: 200px; height: 50px; background-color: #fff; position: absolute; bottom: 0; border-radius: 0 0 10px 10px; } .label { width: 150px; height: 250px; background-color: #fff; position: absolute; top: 80px; left: 25px; border-radius: 10px; } .cap { width: 50px; height: 20px; background-color: #fff; position: absolute; top: 40px; left: 75px; border-radius: 50%; } .water { width: 150px; height: 250px; background-color: #00bfff; position: absolute; top: 150px; left: 25px; border-radius: 10px; overflow: hidden; } .water:before { content: \"\"; width: 150px; height: 150px; background-color: #fff; position: absolute; bottom: 0; border-radius: 50%; transform: translateX(-50%); left: 50%; }
"