送把刀给东篱玩玩
<style>/* 刀面 */
.box {
margin: 100px auto 0;
width: 400px;
height: 100px;
border-radius: 0px 0px 0px 200px / 0px 0px 0px 100px;
background:linear-gradient(185deg, black,black, silver, transparent,lightgray);
position: relative;
opacity: 0.8;
box-shadow: 1px 1px 2px #aaa;
transform: rotate(-15deg);
}
/* 刀柄部分 */
.box::before, .box::after {
content: '';
box-shadow: 1px 1px 10px #eee inset;
position: absolute;
}
/* 刀柄 */
.box::before {
background: tan;
width: 140px;
height: 30px;
right:-140px;
bottom: calc(50% - 15px);
border-radius: 0 20px 20px 0 / 0 40px 40px 0;
background: black;
}
/* 刀柄和刀身之间 */
.box::after {
width: 10px;
height: 102px;
border-radius: 2px;
background:gray;
right:0px;
bottom: -1px;
}
</style>
<div class="box"></div>
<pre style="font-size: 13px;">
<style>
<span style='color: green'>/* 刀面 */</span>
<span style='color: red;'>.box </span>{
<span style='color: blue;'> margin</span>: 100px auto 0;
<span style='color: blue;'> width</span>: 400px;
<span style='color: blue;'> height</span>: 100px;
<span style='color: blue;'> border-radius</span>: 0px 0px 0px 200px / 0px 0px 0px 100px;
<span style='color: blue;'> background</span>:linear-gradient(185deg, black,black, silver, transparent,lightgray);
<span style='color: blue;'> position</span>: relative;
<span style='color: blue;'> opacity</span>: 0.8;
<span style='color: blue;'> box-shadow</span>: 1px 1px 2px #aaa;
<span style='color: blue;'> transform</span>: rotate(-15deg);
}
<span style='color: green'>/* 刀柄部分 */</span>
<span style='color: blue;'>.box</span>::before, .box::after {
<span style='color: blue;'> content</span>: <span style='color: magenta'>''</span>;
<span style='color: blue;'> box-shadow</span>: 1px 1px 10px #eee inset;
<span style='color: blue;'> position</span>: absolute;
}
<span style='color: green'>/* 刀柄 */</span>
<span style='color: blue;'>.box</span>::before {
<span style='color: blue;'> background</span>: tan;
<span style='color: blue;'> width</span>: 140px;
<span style='color: blue;'> height</span>: 30px;
<span style='color: blue;'> right</span>:-140px;
<span style='color: blue;'> bottom</span>: calc(50% - 15px);
<span style='color: blue;'> border-radius</span>: 0 20px 20px 0 / 0 40px 40px 0;
<span style='color: blue;'> background</span>: black;
}
<span style='color: green'>/* 刀柄和刀身之间 */</span>
<span style='color: blue;'>.box</span>::after {
<span style='color: blue;'> width</span>: 10px;
<span style='color: blue;'> height</span>: 102px;
<span style='color: blue;'> border-radius</span>: 2px;
<span style='color: blue;'> background</span>:gray;
<span style='color: blue;'> right</span>:0px;
<span style='color: blue;'> bottom</span>: -1px;
}
</style>
<<span style='color:darkred'>div</span> <span style='color: red'>class</span><span style='color: blue'>=</span><span style='color: magenta'>"box"</span>><<span style='color: darkred'>/div</span>>
</pre> 这是要让老头去抢人的节奏啊 {:5_117:}{:4_204:} 大猫咪 发表于 2022-3-28 22:36
这是要让老头去抢人的节奏啊
东篱有钱钱了，要防身 马黑黑 发表于 2022-3-28 22:43
东篱有钱钱了，要防身
{:4_170:}嗯嗯 拍卖了不少美女{:4_170:} 大猫咪 发表于 2022-3-28 22:50
嗯嗯 拍卖了不少美女
对呀，荷包鼓了，要保护荷包 马黑黑 发表于 2022-3-28 22:50
对呀，荷包鼓了，要保护荷包
老黑下次送AK47{:4_170:} 大猫咪 发表于 2022-3-28 22:51
老黑下次送AK47
那个非法 感觉更像是刀装载简陋的刀鞘里{:4_170:} 哇这个厉害了，惟妙惟肖。看起来一堆代码，而演示出来就是实物，这个在以前无法想象，现在却是眼睁睁的事实。黑黑太厉害，什么都能用代码“造”出来{:4_199:} 老黑送刀给老兄，难道是让他重新打江山。。。。{:4_189:} 加林森 发表于 2022-3-29 11:39
老黑送刀给老兄，难道是让他重新打江山。。。。
刀的用途不一定是打江山用的，保江山也可以 马黑黑 发表于 2022-3-29 11:54
刀的用途不一定是打江山用的，保江山也可以
这个就看老兄怎么使用了 加林森 发表于 2022-3-29 11:59
这个就看老兄怎么使用了
东篱懂得守江山 马黑黑 发表于 2022-3-29 12:18
东篱懂得守江山
肯定的 加林森 发表于 2022-3-29 12:23
肯定的
{:4_181:} 马黑黑 发表于 2022-3-29 12:24
{:4_190:} 我的天啊，送俺一刀？这是让俺耍大刀吗？{:4_170:} 大猫咪 发表于 2022-3-28 22:36
这是要让老头去抢人的节奏啊
抢人不用刀，主要是看气质，你看俺这气质。。。。{:5_117:} 东篱闲人 发表于 2022-3-29 20:02
我的天啊，送俺一刀？这是让俺耍大刀吗？
不可以吗？东篱难道没有这个豪气吗
页:
[1]
2