纯CSS构建的一组三角尺和直尺图形

HTML5 Ruler of Rulers, 可用于数学教学、测量工具类网页应用。

css3, ruler

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    box-sizing: border-box;
    position: relative;
}
*::after,
*::before {
    box-sizing: border-box;
    content: "";
    position: absolute;
}
body {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #eee;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100vh;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0;
    overflow: hidden;
    width: 100vw;
}
.ruler-of-rules {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 90vmin;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 90vmin;
}
.carpenter-ruler-crown {
    height: 33%;
    left: 5%;
    width: 80%;
}
.carpenter-ruler-crown .ruler1,
.carpenter-ruler-crown .ruler2,
.carpenter-ruler-crown .ruler3,
.carpenter-ruler-crown .ruler4,
.carpenter-ruler-crown .ruler5,
.carpenter-ruler-crown .ruler6,
.carpenter-ruler-crown .ruler7,
.carpenter-ruler-crown .ruler8 {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #eda900;
    border-radius: 10% 20% 5% / 5%;
    box-shadow: 0.2vmin 0.1vmin 0 0.1vmin #d99c04;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-filter: blur(0.1px);
    filter: blur(0.1px);
    height: 95%;
    position: absolute;
    width: 8%;
}
.carpenter-ruler-crown .ruler1 .ruler-union,
.carpenter-ruler-crown .ruler2 .ruler-union,
.carpenter-ruler-crown .ruler3 .ruler-union,
.carpenter-ruler-crown .ruler4 .ruler-union,
.carpenter-ruler-crown .ruler5 .ruler-union,
.carpenter-ruler-crown .ruler6 .ruler-union,
.carpenter-ruler-crown .ruler7 .ruler-union,
.carpenter-ruler-crown .ruler8 .ruler-union {
    background-color: #dadada;
    border-radius: 100%;
    box-shadow: 0.1vmin 0.1vmin 0 0.1vmin #bdbdbd;
    height: 1.5vmin;
    left: calc(50% - 12.75%);
    position: absolute;
    top: 10%;
    width: 1.5vmin;
    z-index: 1;
}
.carpenter-ruler-crown .units::after {
    background-image: -webkit-repeating-linear-gradient(bottom, transparent, transparent 4%, #eda900 4%, #eda900 20%);
    background-image: repeating-linear-gradient(to top, transparent, transparent 4%, #eda900 4%, #eda900 20%);
}
.carpenter-ruler-crown .ruler2::after,
.carpenter-ruler-crown .ruler4::after,
.carpenter-ruler-crown .ruler6::after {
    background-image: -webkit-repeating-linear-gradient(top, transparent, transparent 4%, #eda900 4%, #eda900 20%);
    background-image: repeating-linear-gradient(to bottom, transparent, transparent 4%, #eda900 4%, #eda900 20%);
}
.carpenter-ruler-crown .units {
    background-image: -webkit-repeating-linear-gradient(bottom, transparent, transparent 3%, #9e7510 3%, #9e7510 4%);
    background-image: repeating-linear-gradient(to top, transparent, transparent 3%, #9e7510 3%, #9e7510 4%);
    height: 90%;
    width: 50%;
}
.carpenter-ruler-crown .units::after {
    /* by default, units start from bottom */
    
    height: 100%;
    left: 50%;
    width: 100%;
}
.carpenter-ruler-crown .ruler1 {
    -webkit-transform: rotateZ(25deg);
    transform: rotateZ(25deg);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
}
.carpenter-ruler-crown .ruler2 {
    -webkit-transform: translateX(8.324vmin) translateY(-25.215vmin) rotateZ(-25deg) rotateX(180deg) rotateY(180deg);
    transform: translateX(8.324vmin) translateY(-25.215vmin) rotateZ(-25deg) rotateX(180deg) rotateY(180deg);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    z-index: -1;
}
.carpenter-ruler-crown .ruler3 {
    -webkit-transform: translateX(16.648vmin) rotateZ(25deg);
    transform: translateX(16.648vmin) rotateZ(25deg);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    z-index: -2;
}
.carpenter-ruler-crown .ruler4 {
    -webkit-transform: translateX(24.9726vmin) translateY(-25.215vmin) rotateZ(-25deg) rotateX(180deg) rotateY(180deg);
    transform: translateX(24.9726vmin) translateY(-25.215vmin) rotateZ(-25deg) rotateX(180deg) rotateY(180deg);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    z-index: -3;
}
.carpenter-ruler-crown .ruler5 {
    -webkit-transform: translateX(33.2968vmin) rotateZ(25deg);
    transform: translateX(33.2968vmin) rotateZ(25deg);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    z-index: -4;
}
.carpenter-ruler-crown .ruler6 {
    -webkit-transform: translateX(41.621vmin) translateY(-25.215vmin) rotateZ(-25deg) rotateX(180deg) rotateY(180deg);
    transform: translateX(41.621vmin) translateY(-25.215vmin) rotateZ(-25deg) rotateX(180deg) rotateY(180deg);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    z-index: -5;
}
.carpenter-ruler-crown .ruler7 {
    -webkit-transform: translateX(56vmin) translateY(-1.6vmin) rotateZ(-90deg);
    transform: translateX(56vmin) translateY(-1.6vmin) rotateZ(-90deg);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    z-index: -6;
}
.carpenter-ruler-crown .ruler8 {
    -webkit-transform: translateX(31.6vmin) translateY(-1.6vmin) rotateZ(-90deg);
    transform: translateX(31.6vmin) translateY(-1.6vmin) rotateZ(-90deg);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    z-index: -7;
}
.set-square-eyes {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 25%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
}
.set-square-eyes .set-square-left,
.set-square-eyes .set-square-right {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-image: -webkit-radial-gradient(ellipse farthest-corner, rgba(52, 161, 1, 0.8), rgba(49, 128, 12, 0.84));
    background-image: radial-gradient(ellipse farthest-corner, rgba(52, 161, 1, 0.8), rgba(49, 128, 12, 0.84));
    box-shadow: 0.2vmin 0.2vmin 0.4vmin 0.2vmin rgba(45, 88, 24, 0.9);
    -webkit-clip-path: polygon(50% 0%, 0% 100%, 25% 100%, 25% 80%, 50% 30%, 75% 80%, 25% 80%, 25% 100%, 100% 100%, 50% 0%);
    clip-path: polygon(50% 0%, 0% 100%, 25% 100%, 25% 80%, 50% 30%, 75% 80%, 25% 80%, 25% 100%, 100% 100%, 50% 0%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 70%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 33%;
}
.ruler-moustache {
    background-color: #ec6423;
    border-radius: 0% 0% 5% 5%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 10%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 55%;
}
.ruler-moustache .units {
    background-image: -webkit-repeating-linear-gradient(left, transparent, transparent 3%, #9e4c25 3%, #9e4c25 4%);
    background-image: repeating-linear-gradient(to right, transparent, transparent 3%, #9e4c25 3%, #9e4c25 4%);
    height: 50%;
    width: 95%;
}
.ruler-moustache .units::after {
    /* shape the unit-markers */
    
    background-image: -webkit-repeating-linear-gradient(left, transparent, transparent 4%, #ec6423 4%, #ec6423 20%);
    background-image: repeating-linear-gradient(to right, transparent, transparent 4%, #ec6423 4%, #ec6423 20%);
    height: 100%;
    top: 50%;
    width: 100%;
}
.cartabon-mouth {
    background-image: -webkit-radial-gradient(ellipse farthest-corner, #282828, #1b1b1b);
    background-image: radial-gradient(ellipse farthest-corner, #282828, #1b1b1b);
    -webkit-clip-path: polygon(30% 0%, 0% 100%, 15% 100%, 15% 85%, 32.5% 25%, 75% 82.5%, 15% 80%, 15% 100%, 100% 100%, 30% 0%);
    clip-path: polygon(30% 0%, 0% 100%, 15% 100%, 15% 85%, 32.5% 25%, 75% 82.5%, 15% 80%, 15% 100%, 100% 100%, 30% 0%);
    height: 15%;
    left: 5%;
    -webkit-transform: translateY(4vmin) rotateX(180deg);
    transform: translateY(4vmin) rotateX(180deg);
    width: 40%;
}

HTML

HTML5 Ruler of Rulers, 可用于数学教学、测量工具类网页应用。

css3, ruler

编辑器支持Emmet

快捷键

HTML5 Ruler of Rulers, 可用于数学教学、测量工具类网页应用。

css3, ruler

使用CSS3构建三角形（对角线线型）媒体区块（图文块）

6个纯CSS构建的方形天气动画图标

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：