css3 треугольник вверх и вниз

Question

мне нужно создать 1 Div элемент и в ней мне нужно нарисовать 2 треугольника как 1

1) она должна быть стрелка вверх 2) он должен быть вниз arror

но мне нужно добавить их в 1 класс

Я понимаю, что я могу создать 2 класса, а затем с маркой подключить их, но мне нужен только один класс , это проблема.

Могу ли я это сделать?

Answer 1

Если вы хотите сделать это для дизайна (а не функциональный), вы можете использовать псевдо-элементы:

div { 
 
    position: relative; 
 
    margin: 50px; 
 
    height: 100px; 
 
    width: 100px; 
 
    transform: rotate(45deg); 
 
} 
 
div:before { 
 
    content: ""; 
 
    height: 40%; 
 
    width: 40%; 
 
    top: 0; 
 
    left: 0; 
 
    position: absolute; 
 
    border-top: 5px solid black; 
 
    border-left: 5px solid black; 
 
    transition: all 0.6s; 
 
} 
 
div:after { 
 
    content: ""; 
 
    height: 40%; 
 
    width: 40%; 
 
    bottom: 0; 
 
    right: 0; 
 
    position: absolute; 
 
    border-bottom: 5px solid black; 
 
    border-right: 5px solid black; 
 
    transition: all 0.6s; 
 
} 
 
div:hover:before, 
 
div:hover:after { 
 
    border-color: tomato; 
 
}

<div></div>

---

Если вам нужно, чтобы это было фактически функциональный (т.е. зарегистрироваться эр, если вам это нужно, чтобы быть «прессованной» - то вам нужно будет использовать несколько элементов, так как псевдо-элементы не различимы в DOM для «нажатием клавиши»):

div { 
 
    margin: 50px; 
 
    height: 100px; 
 
    width: 100px; 
 
    position: relative; 
 
} 
 
div .up { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    height: 50%; 
 
    width: 50%; 
 
    transform-origin: top left; 
 
    transform: rotate(45deg); 
 
    border-left: 5px solid tomato; 
 
    border-top: 5px solid tomato; 
 
    transition: all 0.6s; 
 
} 
 
div .down { 
 
    position: absolute; 
 
    top: 45%; 
 
    left: -5%; 
 
    height: 50%; 
 
    width: 50%; 
 
    transform-origin: bottom right; 
 
    transform: rotate(45deg); 
 
    border-bottom: 5px solid tomato; 
 
    border-right: 5px solid tomato; 
 
    transition: all 0.6s; 
 
} 
 
div span:hover { 
 
    border-color: black; 
 
}

<div> 
 
    <span class="up"></span> 
 
    <span class="down"></span> 
 
</div>

Answer 2

Вы можете создать квадрат div и просто повернуть его на 45 градусов, используя CSS transform. Вы можете посмотреть демо его на JSFiddle

<div class="diamond"></div> 

<style> 
    .diamond { 
     width: 100px; 
     height: 100px; 
     background-color: red; 
     transform: rotate(45deg); 
    } 
</style>