Как вписать следующую форму с CSS внутри div?

107
11

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


HTML


<div id="DiamondCenter">
<div id="triangle-topleft"></div>
</div>

CSS


#DiamondCenter {
position:fixed;
top:2%;
left:48%;
background: #24201a;
height:40px;
width:40px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
z-index:20 !important;
}
#triangle-topleft {
width: 0;
height: 0;
border-top: 40px solid gray;
border-right: 40px solid transparent;
}

спросил(а) 2015-09-11T17:09:00+03:00 5 лет, 1 месяц назад
1
Решение
115

Использование SVG:


При использовании SVG вы можете использовать элементы path и polyline для рисования необходимой формы. Как указано Paulie_D в комментариях, SVG является лучшим выбором для таких сложных форм вместо CSS (хотя это также может быть достигнуто с помощью CSS).


Подход очень прост и выглядит следующим образом:


    Один элемент path для верхнего многоугольника, который рисуется путем соединения точек в координатах (0,50), (50,0), (100,50) и (50,70).
    Другой элемент path для нижнего многоугольника, который нарисован путем соединения точек в (0,50), (50,70) и (100,50).
    Один элемент polyline для оранжевой границы, который представляет собой ни что иное, как линию, соединяющую (0,50), (50,70) и (100,50).

svg {
height: 100px;
width: 100px;
}
path#top {
fill: gray;
}
path#bottom {
fill: black;
}
polyline#border {
stroke: orange;
stroke-width: 2;
fill: none;
}

<svg viewBox="0 0 100 100">
<path id="top" d="M0,50 L50,0 100,50 50,70z" />
<path id="bottom" d="M0,50 L50,100 100,50 50,70z" />
<polyline id="border" points="0,50 50,70 100,50" />
</svg>

Использование CSS:

Вы можете получить форму, о которой идет речь, используя 2 псевдоэлемента, которые вращаются и перекошены. Размерность каждого псевдоэлемента вычисляется с использованием теоремы Пифагора.


Форма, созданная с использованием этого метода, является отзывчивой и может адаптироваться к изменениям в размерности. Наведите фигуру в фрагменте, чтобы увидеть, как он адаптируется.


*,
*:after,
*:before {
box-sizing: border-box;
}
#DiamondCenter {
position: fixed;
top: 2%;
left: 48%;
background: #24201a;
height: 40px;
width: 40px;
transform: rotate(45deg);
z-index: 20 !important;
overflow: hidden;
}
#DiamondCenter:after {
position: absolute;
content: '';
bottom: 0px;
left: -1px; /* half the width of border-left */
height: calc(100% / 1.414);
width: calc(100% / 1.414);
background: black;
border-left: 2px solid orange;
transform: rotate(40deg) skewX(-20deg);
transform-origin: bottom left;
}
#DiamondCenter:before {
position: absolute;
content: '';
top: -1px; /* half the width of border-top */
right: 0px;
height: calc(100% / 1.414);
width: calc(100% / 1.414);
background: black;
border-top: 2px solid orange;
transform: rotate(-40deg) skewY(-20deg);
transform-origin: top right;
}

/* Just for demo */

#DiamondCenter{
transition: all 1s;
}
#DiamondCenter:hover{
top: 5%;
height: 80px;
width: 80px;
}


<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id="DiamondCenter"></div>

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


*,
*:after,
*:before {
box-sizing: border-box;
}
#DiamondCenter {
position: fixed;
top: 2%;
left: 48%;
background: #24201a;
height: 40px;
width: 40px;
transform: rotate(45deg);
z-index: 20 !important;
overflow: hidden;
}
#DiamondCenter:after {
position: absolute;
content: '';
bottom: 0px;
left: -1px;
height: calc(100% / 1.414);
width: calc(100% / 1.414);
background: seagreen;
border-left: 2px solid orange;
transform: rotate(40deg) skewX(-20deg);
transform-origin: bottom left;
}
#DiamondCenter:before {
position: absolute;
content: '';
top: -1px;
right: 0px;
height: calc(100% / 1.414);
width: calc(100% / 1.414);
background: skyblue;
border-top: 2px solid orange;
transform: rotate(-40deg) skewY(-20deg);
transform-origin: top right;
}

/* Just for demo */

#DiamondCenter{
transition: all 1s;
}
#DiamondCenter:hover{
top: 5%;
height: 80px;
width: 80px;
}


<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id="DiamondCenter"></div>

ответил(а) 2015-09-11T17:44:00+03:00 5 лет, 1 месяц назад
101

Это довольно сложная форма для завершения в CSS, но, как показывают другие, это возможно.


Хорошей альтернативой может быть использование SVG. Его векторная графика, поэтому она блестяще масштабируется для отзывчивости и очень хорошо поддерживается (CanIUse)

<svg width="50%" height="50%" viewBox="0 0 10 10">
<path d="M5,1
L9,5
L5,9
L1,5z" fill="grey" />
<path d="M1,5
L5,6
L9,5
L5,9z" stroke="orange" stroke-width=".1" stroke-dasharray="0,0,8.23,15" />
</svg>

ответил(а) 2015-09-11T18:02:00+03:00 5 лет, 1 месяц назад
41

Вы можете создать форму алмаза с помощью этого css, предположим, что это div, где вы хотите, чтобы идентификатор формы был таким же, как css (cut-diamond)
                                                                                                                                                                                           


 #cut-diamond {
border-style: solid;
border-color: transparent transparent red transparent;
border-width: 0 25px 25px 25px;
height: 0;
width: 50px;
position: relative;
margin: 20px 0 50px 0;
}
#cut-diamond:after {
content: "";
position: absolute;
top: 25px;
left: -25px;
width: 0;
height: 0;
border-style: solid;
border-color: red transparent transparent transparent;
border-width: 70px 50px 0 50px;
}

JSFiddle Demo

ответил(а) 2015-09-11T17:34:00+03:00 5 лет, 1 месяц назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема