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 that you have read and understand our privacy policy and code of conduct.

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