0

div {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
}

div::after,
div::before {
  position: absolute;
  content: ' ';
  top: 0px;
  width: 100%;
  height: 3px;
  background-color: yellow;
  transform: rotate(-45deg);
}

div::after {
  left: 0px;
}

div::before {
  right: 0px;
}
<div>44</div>

введите сюда описание изображения

0

3 ответа 3

3

div {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
}

div::after,
div::before {
  position: absolute;
  content: ' ';
  top: 50%;
  width: 100%;
  height: 3px;
  background-color: yellow;  
}

div::after {
  transform: rotate(-45deg) translateY(-50%);
  left: 0px;
}

div::before {
  transform: rotate(45deg) translateY(-50%);
  right: 0px;
}
<div>44</div>

1
  • а можно только через одно псевдо? другое занято)
    – elka
    24 ноя 2021 в 18:52
1

Обдумайте вариант использования SVG + CSS.

В SVG легко создавать различные формы простые, как у вас, и более сложные. Так же вы получаете адаптивность и максимальную поддержку браузерами. При необходимости если это вектор, то легко создать различные анимации

.shadow-3 {
  background: #e8e8e8;
 width:35vw;
 height:auto;
}
svg  {
  background: white;
    margin: 10px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
<div class="shadow-3">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  version="1.1" id="svg6"  viewBox="0 0 200 200">
   <text xml:space="preserve"  x="63.6" y="119.5" id="text836" font-style="normal" font-variant="normal" font-weight="400" font-stretch="normal" font-size="64" font-family="Berlin Sans FB" fill="#7A8D91" ><tspan id="tspan834" x="63.6" y="119.5">44</tspan></text>
  
  <rect x="10" y="10" width="180" height="180" rx="18" fill="none" stroke="#E6E5EA" stroke-width="4" id="rect4"/>
  <path d="M20.3 20.3 178 178.8" id="path830" fill="none" stroke="#E6E5EA" stroke-width="4" stroke-linecap="round"  stroke-dasharray="none"/>
  <path d="M178 20.3 20.3 178.8" id="path832" fill="none" stroke="#E6E5EA" stroke-width="4" stroke-linecap="round"  stroke-dasharray="none"/>
 
</svg>
</div>

1

Варианты анимации

Это не требовалось в вопросе. Поэтому это не ответ, а бонусный пост.

Ответ ниже

Анимация SVG

  • Анимация линий зачеркивания

Основана на изменении параметров stroke-dasharray от изменения значения максимального пробела stroke-dasharray="0,223.5" до нулевого пробела и максимальной черты stroke-dasharray="223.5,0"

В команде анимации это записано в values="" вот так:

<animate id="anP1" attributeName="stroke-dasharray" begin="svg1.click" dur="0.5s" 
  values="0,223.5;223.5,0" fill="freeze" restart="never" />

анимация после клика

.shadow-3 {
  background: #e8e8e8;
 width:35vw;
 
}
svg  {
  background: white;
   margin: 10px;
  box-shadow: 4px 10px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
<div class="shadow-3">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  version="1.1"   width="300" height="300" viewBox="0 0 200 200">
   <text xml:space="preserve"  x="63.6" y="119.5" id="text836" font-style="normal" font-variant="normal" font-weight="400" font-stretch="normal" font-size="64" font-family="Berlin Sans FB" fill="#7A8D91" ><tspan id="tspan834" x="63.6" y="119.5">44</tspan></text>
                   <!-- полная длина линии  688.36 -->
  <rect id="rect4" x="10" y="10" width="180" height="180" rx="18" fill="none" stroke="#E6E5EA" stroke-width="4">
  </rect>    
   
                    <!-- полная длина линии  223.5 -->
  <path id="path1" d="M20.3 20.3 178 178.8"  fill="none" stroke="#E6E5EA" stroke-width="4" stroke-linecap="round"  stroke-dasharray="0,223.5">
    <animate id="anP1" attributeName="stroke-dasharray" begin="svg1.click" dur="0.5s" values="0,223.5;223.5,0" fill="freeze" restart="never" />
   </path> 
       <!-- полная длина линии  223.5 -->
  <path id="path2" d="M178 20.3 20.3 178.8"  fill="none" stroke="#E6E5EA" stroke-width="4" stroke-linecap="round"  stroke-dasharray="0,223.5">
    <animate id="anP2" attributeName="stroke-dasharray" begin="anP1.end+0.2s" dur="0.5s" values="0,223.5;223.5,0" fill="freeze" restart="whenNotActive"/>
   </path> 
 
</svg>
</div> 

  • Анимация контура квадрата и линий зачеркивания

Последовательные анимации (друг за другом) реализованы логическим цепочками в begin

begin="anRect.end+0.2s" буквально - когда заканчивается анимация прямоугольника, через паузу в 0.2s начнется анимация рисования линии.

.shadow-3 {
  background: #e8e8e8;
 width:35vw;
 
}
svg  {
  background: white;
  
  margin: 10px;
  box-shadow: 4px 10px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}


 
<div class="shadow-3">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  version="1.1"   width="300" height="300" viewBox="0 0 200 200">
   <text xml:space="preserve"  x="63.6" y="119.5" id="text836" font-style="normal" font-variant="normal" font-weight="400" font-stretch="normal" font-size="64" font-family="Berlin Sans FB" fill="#7A8D91" ><tspan id="tspan834" x="63.6" y="119.5">44</tspan></text>
                   <!-- полная длина линии  688.36 -->
  <rect id="rect4" x="10" y="10" width="180" height="180" rx="18" fill="none" stroke="#E6E5EA" stroke-width="4" stroke-dasharray="0,688.36" >
     <animate id="anRect"  attributeName="stroke-dasharray" begin="svg1.click" dur="2s" values="0,688.36;688.36,0" fill="freeze" restart="never" />
 </rect>     
   
                    <!-- полная длина линии  223.5 -->
  <path id="path1" d="M20.3 20.3 178 178.8"  fill="none" stroke="#E6E5EA" stroke-width="4" stroke-linecap="round"  stroke-dasharray="0,223.5">
    <animate id="anP1" attributeName="stroke-dasharray" begin="anRect.end+0.2s" dur="0.5s" values="0,223.5;223.5,0" fill="freeze" />
   </path> 
       <!-- полная длина линии  223.5 -->
  <path id="path2" d="M178 20.3 20.3 178.8"  fill="none" stroke="#E6E5EA" stroke-width="4" stroke-linecap="round"  stroke-dasharray="0,223.5">
    <animate id="anP2" attributeName="stroke-dasharray" begin="anP1.end+0.2s" dur="0.5s" values="0,223.5;223.5,0" fill="freeze" />
   </path>
 </svg>
</div> 
  

Вариант анимации CSS

Анимация зачеркивания при наведении курсора

.shadow-3 {
  background: #e8e8e8;
 width:35vw;
 
}
svg  {
  background: white;
  
  margin: 10px;
  box-shadow: 4px 10px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
#path1,#path2 {
stroke:#E6E5EA;
 stroke-width:4;
 stroke-linecap:round; 
stroke-dasharray:0,223.5; 
}
#svg1:hover   #path1 {
stroke-dasharray:0,223.5;
animation:draw 0.5s forwards;
}
@keyframes draw {
to {stroke-dasharray:223.5,0;}
}
#svg1:hover   #path2 {
stroke-dasharray:0,223.5;
animation:draw 0.5s  forwards 0.5s;
}
@keyframes draw2 {
to {stroke-dasharray:223.5,0;}
}
<div class="shadow-3">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  version="1.1"   width="300" height="300" viewBox="0 0 200 200">
   <text xml:space="preserve"  x="63.6" y="119.5" id="text836" font-style="normal" font-variant="normal" font-weight="400" font-stretch="normal" font-size="64" font-family="Berlin Sans FB" fill="#7A8D91" ><tspan id="tspan834" x="63.6" y="119.5">44</tspan></text>
                   <!-- полная длина линии  688.36 -->
  <rect id="rect4" x="10" y="10" width="180" height="180" rx="18" fill="none" stroke="#E6E5EA" stroke-width="4">
  </rect>    
   
                    <!-- полная длина линии  223.5 -->
  <path id="path1" d="M20.3 20.3 178 178.8" stroke="red" >
    
   </path> 
       <!-- полная длина линии  223.5 -->
  <path id="path2" d="M178 20.3 20.3 178.8" >
    <animate id="anP2" attributeName="stroke-dasharray" begin="anP1.end+0.2s" dur="0.5s" values="0,223.5;223.5,0" fill="freeze" />
   </path> 
 
</svg>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.