HTML5 CSS3水晶风格的页面头部

Crystal Header，使用CSS3 shape创建一组交叉的三角形图案模式。

html5, template

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    margin: 0;
    padding: 0;
}
.crystal_container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 400px;
    background: radial-gradient(at top left, rgb(0, 188, 212), rgb(3, 169, 244));
    z-index: -999;
}
.block {
    width: 198px;
    height: 198px;
    display: block;
    background: radial-gradient(at top left, #FFCC4D, #FF9800);
    border-top: 1px solid #ffcc80;
    border-left: 1px solid #ffcc80;
    border-right: 1px solid #bb8020;
    border-bottom: 1px solid #bb8020;
    box-shadow: 2px 2px 6px rgba(170, 31, 0, 0.2), 3px 8px 12px rgba(71, 35, 22, 0.3);
    z-index: 999;
    margin: 100px auto;
}
.text {
    margin-left: 17px;
    font-family: "Roboto Slab", serif;
    font-weight: bold;
    font-size: 24px;
    line-height: 22px;
}
.crystal {
    width: 0;
    height: 0;
    position: absolute;
    z-index: -998;
}
#c01 {
    border-bottom: 100px solid rgba(0, 96, 100, 0.1);
    border-right: 100vw solid transparent;
    bottom: 0;
    right: 0;
}
#c02 {
    border-bottom: 160px solid rgba(2, 136, 209, 0.3);
    border-left: 100vw solid transparent;
    bottom: 0;
    left: 0;
}
#c03 {
    border-top: 200px solid rgba(0, 96, 155, 0.2);
    border-right: 40vw solid transparent;
    border-left: 60vw solid transparent;
    top: 0;
    right: 0;
}
#c04 {
    border-top: 400px solid rgba(24, 255, 255, 0.3);
    border-right: 80vw solid transparent;
    border-left: 20vw solid transparent;
    top: 0;
    left: 0;
}
#c05 {
    border-bottom: 250px solid transparent;
    border-top: 100px solid transparent;
    border-right: 100vw solid rgba(128, 216, 255, 0.3);
    bottom: 10px;
    right: 0;
}
#c06 {
    border-bottom: 400px solid rgba(79, 195, 247, 0.4);
    border-right: 10vw solid transparent;
    border-left: 30vw solid transparent;
    bottom: 0;
    right: 20vw;
}
#c07 {
    border-top: 367px solid rgba(0, 131, 143, 0.2);
    border-left: 60vw solid transparent;
    top: 0;
    right: 0;
}
#c08 {
    border-top: 50px solid rgba(167, 255, 235, 0.4);
    border-right: 60vw solid transparent;
    top: 0;
    left: 0;
}
#c09 {
    border-top: 400px solid rgba(0, 176, 255, 0.3);
    border-right: 30vw solid transparent;
    top: 0;
    left: 0;
}
#c10 {
    border-bottom: 400px solid rgba(128, 222, 234, 0.2);
    border-right: 20vw solid transparent;
    border-left: 20vw solid transparent;
    bottom: 0;
    right: 60vw;
}
/* Description */

.description {
    max-width: 500px;
    margin: 40px auto 80px;
}
.description h2 {
    font-family: "Roboto Slab", serif;
}
.description p {
    font-family: sans-serif;
    font-weight: lighter;
    line-height: 24px;
    text-align: justify;
}
/* Credits */
/*Designed by Brendan Bax ~ www.brendanbax.com*/

.credits {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 60px;
    font-family: "Roboto Slab", serif;
    background: #fff;
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.05);
}
a {
    text-decoration: none;
    color: #32ceea;
}
.credits_left {
    display: block;
    position: absolute;
    left: 20px;
}
.credits_right {
    display: block;
    position: absolute;
    right: 20px;
}
.social_icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin: 8px;
}

HTML

<div class="crystal_container">
    <div class="block">
        <div class="text">
            <h1>CSS</h1>
            <h1>Crystal</h1>
            <h1>Header</h1>
        </div>
    </div>
    <div class="crystal" id="c01"></div>
    <div class="crystal" id="c02"></div>
    <div class="crystal" id="c03"></div>
    <div class="crystal" id="c04"></div>
    <div class="crystal" id="c05"></div>
    <div class="crystal" id="c06"></div>
    <div class="crystal" id="c07"></div>
    <div class="crystal" id="c08"></div>
    <div class="crystal" id="c09"></div>
    <div class="crystal" id="c10"></div>
</div>

<div class="description">
    <h2>How it works</h2>
    <p>The Crystal Header uses CSS shapes to create a pattern of intersecting triangles. The main class of "crystal" is applied to a div which has a width and height of 0. The position is absolute relative to the parent "crystal_container" so we can move
        the triangles around.</p>
    <p>The triangles are created by combining a vertical border and horiztonal border, one of which is transparent giving a point. Experiment with the border thicknesses to get different size triangles and use the rgba values to change color and transparency.
        The position attributes can be switched around to snap triangles to the top, bottom, left or right as needed. Also z-index can be applied to any shape to push elements in front of one another.</p>
</div>

Crystal Header，使用CSS3 shape创建一组交叉的三角形图案模式。

html5, template

编辑器支持Emmet

快捷键

Crystal Header，使用CSS3 shape创建一组交叉的三角形图案模式。

html5, template

HTML5 CSS3水晶球里面的圣诞节日动画

HTML5 CSS3新奇的响应式皂形网格布局页面模板 | mask-image使用示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：