URL скопирован в буфер обмена!
Как добавить угловую рамку в шейп на Tilda?
С помощью этой модификации можно добавить декоративную угловую обводку для шейпа в зеро блок. Рамку легко адаптировать. Доступна гибкая настройка параметров: цвет обводки, толщина линий, длина, высота и радиус скругления углов.
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
Класс шейпа
Длина угла
Высота угла
Цвет
Толщина углов
Радиус скругления углов
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD125-->
<style>
.tc-corner::before,
.tc-corner::after,
.tc-corner .tn-atom::before,
.tc-corner .tn-atom::after {
content: '';
position: absolute;
width: 20px;
height: 30px;
border: 3px solid #f96855;
box-sizing: border-box;
z-index: 1;
}
.tc-corner::before {
top: 0;
left: 0;
border-right: none;
border-bottom: none;
border-top-left-radius: 0px;
}
.tc-corner::after {
top: 0;
right: 0;
border-left: none;
border-bottom: none;
border-top-right-radius: 0px;
}
.tc-corner .tn-atom::before {
bottom: 0;
left: 0;
border-top: none;
border-right: none;
border-bottom-left-radius: 0px;
}
.tc-corner .tn-atom::after {
bottom: 0;
right: 0;
border-top: none;
border-left: none;
border-bottom-right-radius: 0px;
}
</style>
<script> (function TCDupdType() { const TildahtmlBclok = document.currentScript; if (TildahtmlBclok) { const recordElement = TildahtmlBclok.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>
1. Создаем в Zero Block шейп с прозрачным цветом и присваиваем класс tc-corner
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
Если вам нужно чтобы рамки были на цветном шейпе, то шейпу можно указать цвет.
2. Указываем настройки в генераторе:
Длина и высота углов - указываем ширину и высоту углов;
Цвет - указываем цвет углов;
Толщина углов - указываем толщину линий углов;
Радиус скругления углов - если нужно закруглить углы, то указываем радиус скругления. Оставляем 0 если скругление не нужно;
3. Копируем код и вставляем в HTML блок T123.
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
Если вам нужно чтобы рамки были на цветном шейпе, то шейпу можно указать цвет.
2. Указываем настройки в генераторе:
Длина и высота углов - указываем ширину и высоту углов;
Цвет - указываем цвет углов;
Толщина углов - указываем толщину линий углов;
Радиус скругления углов - если нужно закруглить углы, то указываем радиус скругления. Оставляем 0 если скругление не нужно;
3. Копируем код и вставляем в HTML блок T123.
СЛОИ
ГРАНИЦЫ
ДЕТАЛИ
