本次繪製的形狀中難點主要有等腰梯形
、等腰三角形
、圓角等腰三角形
1、電池
效果:
難點: 電池電量100%時凸出來的那部分白色怎麼變成紅色?(即電池正極凸出來的那部分怎麼填充顏色?)
解決: 電量100%時讓顯示電量的紅色div溢位整個電池,並在電池凸出來部分的兩邊分別使用一個白色div蓋住即可。如圖:
未蓋住:
蓋住了:
程式碼實現:
<style>
.dyestuff-battery{
display: inline-block;
position: relative;
width: 98px;
height: 160px;
padding-top: 14px;
overflow: hidden;
}
.dyestuff-battery + .dyestuff-battery{
margin-left: 20px;
}
.dyestuff-battery::before{ /* 蓋住電池凸出部分左邊 */
position: absolute;
/* top: 1px; */
top: 0;
left: 0;
z-index: 5;
content: ' ';
width: 34%;
height: 14px;
background-color: #fff;
}
.dyestuff-battery::after{ /* 蓋住電池凸出部分右邊 */
position: absolute;
/* top: 1px; */
top: 0;
right: 0;
z-index: 5;
content: ' ';
width: 34%;
height: 14px;
background-color: #fff;
}
.dyestuff-battery-outter{
position: relative;
height: 100%;
padding: 8px;
/* border: 8px solid #D8252B; */
border-radius: 12px;
background-color: #D8252B;
}
.dyestuff-battery-outter::before{
position: absolute;
top: -14px;
left: 34%;
content: ' ';
height: 14px;
width: 32%;
border-radius: 4px 4px 0 0;
background-color: #D8252B;
}
.dyestuff-battery-inner{
position: absolute;
top: 8px;
left: 8px;
bottom: 8px;
right: 8px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
background-color: #fff;
}
.dyestuff-battery-inner::before{
position: absolute;
top: -14px;
left: 39%;
content: ' ';
height: 14px;
width: 22%;
background-color: #fff;
}
.dyestuff-battery-text{
position: relative;
z-index: 2;
font-size: 20px;
}
.dyestuff-battery-progress{
position: absolute;
width: 100%;
left: 0;
bottom: 0;
height: 0;
background-color: #D8252B;
}
</style>
<div>
<div class="dyestuff-battery">
<div class="dyestuff-battery-outter">
<div class="dyestuff-battery-inner">
<div class="dyestuff-battery-text">0%</div>
<div class="dyestuff-battery-progress"></div>
</div>
</div>
</div>
<div class="dyestuff-battery">
<div class="dyestuff-battery-outter">
<div class="dyestuff-battery-inner">
<div class="dyestuff-battery-text">40%</div>
<div class="dyestuff-battery-progress" style="height: 40%;"></div>
</div>
</div>
</div>
<div class="dyestuff-battery">
<div class="dyestuff-battery-outter">
<div class="dyestuff-battery-inner">
<div class="dyestuff-battery-text">100%</div>
<div class="dyestuff-battery-progress" style="height: calc(100% + 14px);"></div>
</div>
</div>
</div>
</div>
2、水彩筆
效果:
難點: 等腰梯形的繪製
解決: 使用clip-path
繪製等腰梯形
程式碼實現:
<style>
.dyestuff-watercolor-pen{
display: inline-block;
width: 40px;
}
.dyestuff-watercolor-pen + .dyestuff-watercolor-pen{
margin-left: 20px;
}
.dyestuff-watercolor-pen .penpoint{
width: 8px;
height: 8px;
border: 1px solid #000;
border-radius: 50%;
margin: 0 auto;
background-color: #D9242D;
}
.dyestuff-watercolor-pen .pen-head{ /* 繪製等腰梯形 */
position: relative;
height: 21px;
border: 1px solid #000;
border-bottom: none;
margin: 0 5px;
background-color: #000;
clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%);
}
.dyestuff-watercolor-pen .pen-head-inner{
width: 100%;
height: 100%;
background-color: #fff;
clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%);
}
.dyestuff-watercolor-pen .pen-body{
height: 152px;
border: 1px solid #000;
background-color: #D9242D;
}
.dyestuff-watercolor-pen .pen-cap{
height: 9px;
border: 1px solid #000;
border-top: none;
margin: -1px 4px 0 4px;
background-color: #D9242D;
}
</style>
<div>
<div class="dyestuff-watercolor-pen">
<div class="penpoint"></div>
<div class="pen-head">
<div class="pen-head-inner"></div>
</div>
<div class="pen-body"></div>
<div class="pen-cap"></div>
</div>
<div class="dyestuff-watercolor-pen">
<div class="penpoint" style="background-color: #FFF000;"></div>
<div class="pen-head">
<div class="pen-head-inner"></div>
</div>
<div class="pen-body" style="background-color: #FFF000;"></div>
<div class="pen-cap" style="background-color: #FFF000;"></div>
</div>
</div>
3、鉛筆
效果:
難點: 等腰三角形的繪製
解決: 使用clip-path
繪製等腰三角形
程式碼實現:
<style>
.dyestuff-pencil{
display: inline-block;
width: 24px;
}
.dyestuff-pencil + .dyestuff-pencil{
margin-left: 20px;
}
.dyestuff-pencil .penpoint{
position: relative;
height: 46px;
border: 1px solid #000;
background-color: #000;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.dyestuff-pencil .penpoint::before{
position: absolute;
content: ' ';
left: 0;
right: 0;
top: 10px;
height: 1px;
z-index: 2;
background-color: #000;
}
.dyestuff-pencil .penpoint-inner{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-color: #D92622;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.dyestuff-pencil .pen-body{
height: 230px;
border: 1px solid #000;
border-top: none;
background-color: #D92622;
}
</style>
<div>
<div class="dyestuff-pencil">
<div class="penpoint">
<div class="penpoint-inner"></div>
</div>
<div class="pen-body"></div>
</div>
<div class="dyestuff-pencil">
<div class="penpoint">
<div class="penpoint-inner" style="background-color: #FBCC96;"></div>
</div>
<div class="pen-body" style="background-color: #FBCC96;"></div>
</div>
</div>
4、蠟筆
效果:
難點: 圓角等腰三角形的繪製
解決: 使用rotate
+skewX
繪製
瑕疵 直角與三角相接的地方不能重合,如圖(有更好辦法的大佬麻煩提供下程式碼):
程式碼實現:
<style>
.dyestuff-crayon{
display: inline-block;
width: 24px;
}
.dyestuff-crayon + .dyestuff-crayon{
margin-left: 20px;
}
.dyestuff-crayon .penpoint{
height: 24px;
border: 1px solid #000;
border-right: none;
border-bottom: none;
transform: rotate(57deg) skewX(20deg);
border-top-left-radius: 6px;
margin-bottom: -12px;
background-color: #D92622;
}
.dyestuff-crayon .pen-body{
height: 230px;
border: 1px solid #000;
border-top: none;
margin: 0 -2px;
background-color: #D92622;
}
</style>
<div>
<div class="dyestuff-crayon">
<div class="penpoint"></div>
<div class="pen-body"></div>
</div>
<div class="dyestuff-crayon">
<div class="penpoint" style="background-color: #00A3DA;"></div>
<div class="pen-body" style="background-color: #00A3DA;"></div>
</div>
</div>