12.04.2019, 22:45
|
 |
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
Сообщение от Блондинка
|
|
ну точно, я угадала, все увидев меня срочно ретируются
|
неужели я была права? |
|
16.09.2019, 23:35
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
Сообщение от Блондинка
|
|
Никто не знает почему фон не обрезается?
|
??? |
|
16.09.2019, 23:44
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
Malleys,
А если использовать
clip-path: poligon(0 0, 100% 0, 100% 90%, 50% 100%, 0 80%);
возможно ли совместить с бордер радиус для верхних прямых углов и у дива установить фон, а у нижних обрезанных углов обрезать и фон?
|
|
16.09.2019, 23:45
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от Блондинка
|
|
???
|
Что значит, что фон не обрезается? Вы можете использовать CSS-свойства clip-path или mask. Мощнейшие возможности по обрезанию! Также вас возможно заинтересует свойство shape-outside
UPD
|
Сообщение от Блондинка
|
|
возможно ли совместить с бордер радиус для верхних прямых углов и у дива установить фон, а у нижних обрезанных углов обрезать и фон?
|
Всё можно, если я правильно понял, то можно так... Зачем вы спрашиваете то, что и так знаете?
<div class="box"></div>
<style>
.box {
width: 320px;
height: 240px;
background: linear-gradient(to bottom, transparent, red), url(https://picsum.photos/320/240) center / cover;
border-radius: 1em;
clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
}
</style>
Последний раз редактировалось Malleys, 16.09.2019 в 23:57.
|
|
17.09.2019, 00:28
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
Malleys,
в 168 посте, как лучше и кроссбраузерно сделать?
|
|
17.09.2019, 01:28
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
<div class="box"></div>
<style>
.box {
width: 320px;
height: 240px;
border: 5px solid #000;
box-shadow: 5px 5px #000;
background: linear-gradient(to bottom, transparent, red), url(https://picsum.photos/320/240) center / cover;
border-radius: 1em;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
}
</style>
я то думала почему не обрезали, а про префиксы забыла...
Последний раз редактировалось Блондинка, 17.09.2019 в 03:49.
|
|
17.09.2019, 16:53
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
Malleys,
как сделать бордер вокруг видимой области а не по всему блоку?
|
|
17.09.2019, 20:03
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от Блондинка
|
|
как сделать бордер вокруг видимой области а не по всему блоку?
|
border предназначен для работы с прямоугольной областью, как работать с любой областью я вам показывал полгода назад!
Предыдущий пример можно доделать так...
<div class="box"></div>
<style>
.box {
width: 320px;
height: 240px;
background: yellowgreen;
border-radius: 1em;
clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
position: relative;
}
.box::before {
all: inherit;
content: "";
display: block;
transform: scale(0.9);
background: url(https://picsum.photos/320/240) center / cover;
position: absolute;
}
</style>
Если вам нужна более настраиваемая рамка, то используйте svg...
<style>
svg.box {
width: 320px;
height: 240px;
}
</style>
<svg viewBox="-5 -5 330 250" class="box">
<style>
path {
stroke: tan;
stroke-width: 10px;
fill: url(#img1);
}
</style>
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="320" height="240">
<image xlink:href="https://picsum.photos/320/240/" x="0" y="0" />
</pattern>
</defs>
<path d="M 20 0 h 280 a 20 20 0 0 1 20 20 v 190 l -160 30 l -160 -30 v -190 a 20 20 0 0 1 20 -20 z"></path>
</svg>
Последний раз редактировалось Malleys, 17.09.2019 в 20:12.
|
|
18.09.2019, 00:44
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
÷а ну нахфик, второй день пытаюсь что-то сделать, и нифига не получается,.. или радиус не совпадает у обоих верхних углов, или левый нормально а правый не совпадает, или фон у нижних углов не обрезается, или...
видно ничего не получится у меня...
|
|
18.09.2019, 06:16
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
Наконец-то получилось то что хотела, блок с серым фоном, и сделала даже лучше чем ожидала - блок с зелёным фоном
<!DOCTYPE html>
<html lang="ru">
<head>
<style>
.box {
width: 150px;
height: 50px;
display: inline-block;
background: #999;
border: 1px solid #999;
border-radius: 8px/5px;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 35px, 50% 50px, 0 35px);
clip-path: polygon(0 0, 100% 0, 100% 35px, 50% 50px, 0 35px);
}
.block {
width: 148px;
height: 48px;
background: #e1e1e1;
border: 1px solid transparent;
border-radius: 7px/4px;
position: absolute;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 33px, 50% 48px, 0 33px);
clip-path: polygon(0 0, 100% 0, 100% 33px, 50% 48px, 0 33px);
text-align: center;
padding-top: 10px; }
.box_01 {
width: 150px;
height: 50px;
display: inline-block;
background: #008000;
border: 1px solid #008000;
border-radius: 8px/5px;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 35px, 50% 50px, 0 35px);
clip-path: polygon(0 0, 100% 0, 100% 35px, 50% 50px, 0 35px);
}
.block_01 {
width: 148px;
height: 48px;
background: #cfc;
border: 1px solid transparent;
border-radius: 7px/4px;
position: absolute;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 33px, 50% 43px, 0 33px);
clip-path: polygon(0 0, 100% 0, 100% 33px, 50% 43px, 0 33px);
text-align: center;
padding-top: 10px; }
</style>
</head>
<body>
<div class="box">
<div class="block">
<a>0001</a>
</div>
</div>
<div class="box_01">
<div class="block_01">
<a>0002</a>
</div>
</div>
</body>
</html>
|
|
|
|
