CSS3 红酒瓶 - 踏得网

Wine Bottle with Pure CSS 使用CSS3 linear-gradient构建的图案。

css3, bottle

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 1949
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html {
    height: 100%;
    width: 100%;
    background-color: #DEF;
    background-image: -webkit-radial-gradient(closest-side, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 99%), -webkit-radial-gradient(closest-side, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 99%);
    background-image: radial-gradient(closest-side, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 99%), radial-gradient(closest-side, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 99%);
    background-size: 5em 5em;
    background-position: 0 0, 2.5em 2.5em;
}
wine {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -2.9375em 0 0 -2.4275em;
    height: 12.5em;
    width: 4.875em;
    font-size: 1.5em;
    border-top-left-radius: 2.1875em 4.875em;
    border-top-right-radius: 2.1875em 4.875em;
    border-bottom-left-radius: 0.625em 1.25em;
    border-bottom-right-radius: 0.625em 1.25em;
    background-color: #130100;
    background-repeat: no-repeat;
    background-image: -webkit-linear-gradient(0deg, #AB7065, #c69e97 50%, #c69e97, #AB7065), -webkit-linear-gradient(0deg, #D2B7B2, #eee4e2, #eee4e2, #b68a82), -webkit-linear-gradient(90deg, #650500, #650500), -webkit-radial-gradient(center ellipse, #460400 5%, #130100 40%, #000000 70%);
    background-image: linear-gradient(90deg, #AB7065, #c69e97 50%, #c69e97, #AB7065), linear-gradient(90deg, #D2B7B2, #eee4e2, #eee4e2, #b68a82), linear-gradient(0deg, #650500, #650500), radial-gradient(ellipse at center, #460400 5%, #130100 40%, #000000 70%);
    background-size: 3.125em 5.625em, 3.75em 6.875em, 4.857em 1.25em, 4.9em 18.75em;
    background-position: 0 4.5625em, 0 3.9375em, 0 -0.6875em, 0em -3.125em;
}
wine::before,
wine::after {
    content: '';
    position: absolute;
    top: -6.5625em;
    height: 8.125em;
    width: 1.875em;
    border-color: transparent;
    border-style: solid;
    border-width: 0 0 0.4375em;
    border-top-left-radius: 0 0;
    border-top-right-radius: 0 0;
    z-index: -1;
}
wine::before {
    left: -0.1875em;
    border-right-color: #6a0500;
    border-right-width: 1.25em;
    border-bottom-left-radius: 1.25em 0;
    border-bottom-right-radius: 11.25em 18.75em;
    background-repeat: no-repeat;
    background-image: -webkit-linear-gradient(90deg, #650500, #650500), -webkit-linear-gradient(90deg, #650500, #650500);
    background-image: linear-gradient(0deg, #650500, #650500), linear-gradient(0deg, #650500, #650500);
    background-size: 1.25em 1.25em, 1.25em 1.25em;
    background-position: 1.75em 0, 1.8125em 0.3125em;
}
wine::after {
    left: 1.9375em;
    border-left-color: #6a0500;
    border-left-width: 1.25em;
    border-bottom-left-radius: 11.25em 18.75em;
    border-bottom-right-radius: 1.25em 0;
    background-repeat: no-repeat;
    background-image: -webkit-linear-gradient(90deg, #650500, #650500), -webkit-linear-gradient(90deg, #650500, #650500);
    background-image: linear-gradient(0deg, #650500, #650500), linear-gradient(0deg, #650500, #650500);
    background-size: 1.25em 1.25em, 1.25em 1.25em;
    background-position: -1.125em 0, -1.1875em 0.3125em;
}

HTML

Wine Bottle with Pure CSS 使用CSS3 linear-gradient构建的图案。

css3, bottle

编辑器支持Emmet

快捷键

Wine Bottle with Pure CSS 使用CSS3 linear-gradient构建的图案。

css3, bottle

CSS3 红酒碰杯LOADING动画

CSS3 口袋妖怪游戏中的红白双色球图案

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：