#html #css
Вопрос:
Я пытаюсь нарисовать круг в углу рамки, как на картинке, но видно только ту часть круга, которая находится внутри рамки. Та часть, которую я пометил крестиком, невидима.
Как это выглядит:
Как я хочу, чтобы это выглядело:
Мой код:
.circle{
height: 150px;
width: 150px;
border-radius: 50%;
background: black;
line-height: 0;
position: absolute;
right:-20px; top:-2px;
z-index: 2;
}
.circle:after {
content: "";
display: block;
padding-bottom: 100%;
position: relative;
}
.circle-txt {
/* (E1) CENTER TEXT IN CIRCLE */
position: absolute;
bottom: 50%;
width: 100%;
text-align: center;
/* (E2) THE FONT - NOT REALLY IMPORTANT */
font-family: "font";
font-size:inherit;
}
:root{
--pic:"M510.295 108.139C571.169 177.774 609.697 279.36 589.662 365.38C570.398 451.399 492.572 521.854 409.352 555.443C326.132 589.031 236.748 586.574 162.775 548.889C88.8013 511.204 30.2391 438.292 8.66355 353.91C-12.1414 268.71 4.81077 171.22 56.438 104.043C107.295 36.8656 193.597 0 278.358 0C363.89 0.819237 448.651 38.5041 510.295 108.139Z"
}
.frame{
padding-right: 1px;
height: 579px;
width: 595px;
clip-path: path(var(--pic));
margin-left: 8%;
margin-bottom: 5%;
position: relative;
z-index: 1;
}
img{
height: 579px;
width: 595px;
} <div class="frame">
<img src="1.png">
<div class="circle">
<div class="circle-txt">فریلنسینگ چیست؟</div>
</div>
</div> Я был бы признателен, если бы кто-нибудь мог сказать мне, что я делаю не так.
Комментарии:
1. Можете ли вы поделиться своим кодом?
2. Я только что это сделал.
Ответ №1:
Проверьте мое решение.
.circle {
height: 150px;
width: 150px;
border-radius: 50%;
background: black;
line-height: 0;
position: absolute;
right: 30px;
top: 38px;
z-index: 2;
}
.wrapp {
height: 579px;
width: 595px;
margin-left: 8%;
margin-bottom: 5%;
position: relative;
}
.frame {
clip-path: path(var(--pic));
}
img {
height: 579px;
width: 595px;
background: red;
}
.circle:after {
content: "";
display: block;
padding-bottom: 100%;
position: relative;
}
.circle-txt {
/* (E1) CENTER TEXT IN CIRCLE */
position: absolute;
bottom: 50%;
width: 100%;
text-align: center;
color:#fff;
/* (E2) THE FONT - NOT REALLY IMPORTANT */
font-family: "font";
font-size:inherit;
}
:root{
--pic:"M510.295 108.139C571.169 177.774 609.697 279.36 589.662 365.38C570.398 451.399 492.572 521.854 409.352 555.443C326.132 589.031 236.748 586.574 162.775 548.889C88.8013 511.204 30.2391 438.292 8.66355 353.91C-12.1414 268.71 4.81077 171.22 56.438 104.043C107.295 36.8656 193.597 0 278.358 0C363.89 0.819237 448.651 38.5041 510.295 108.139Z"
} <div class="wrapp">
<div class="circle">
<div class="circle-txt">فریلنسینگ چیست؟</div>
</div>
<div class="frame">
<img src="1.png" />
</div>
</div> Комментарии:
1. спасибо, здесь все работает идеально, но на моей веб-странице все то же самое.
2. Вы полностью заменили мои коды исходным кодом?
3. нет,я подогнал свой с вашим, когда он не сработал, я заменил его полностью, и все равно никаких шансов. возможно ли, что рамка, которую я выбрал для своей фотографии, вызвала эту проблему?
Ответ №2:
Из вашего описания и изображений, которыми вы поделились, кажется, что вы, возможно, используете радиус границы вокруг всего набора элементов, который отсекает меньший верхний правый круг.
Вот решение, которое вы можете использовать.
HTML:
<div class="circle-wrapper">
<div class="big-circle"></div>
<div class="little-circle"></div>
<div class="circle-wrapper">
CSS:
.circle-wrapper { position: relative; width: 24px; height: 24px; }
.big-circle { width: 24px; height: 24px; background: red; border-radius: 24px; }
.little-circle { position: absolute; width: 12px; height: 12px; background: blue; border-radius: 12px; top: -6px; right: -6px; }
Ответ №3:
Используйте border-radius , чтобы позволить видеть переполненный контент, clip-path вырезайте его 😉 (или используйте его на img себе, если этого достаточно)
возможный пример.
.circle{
height: 150px;
width: 150px;
border-radius: 50%;
background: black;
line-height: 0;
position: absolute;
right:-20px; top:-2px;
z-index: 2;
}
.circle:after {
content: "";
display: block;
padding-bottom: 100%;
position: relative;
}
.circle-txt {
/* (E1) CENTER TEXT IN CIRCLE */
position: absolute;
bottom: 50%;
width: 100%;
text-align: center;
/* (E2) THE FONT - NOT REALLY IMPORTANT */
font-family: "font";
font-size:inherit;
color:hotpink;
}
:root{
--pic:"M510.295 108.139C571.169 177.774 609.697 279.36 589.662 365.38C570.398 451.399 492.572 521.854 409.352 555.443C326.132 589.031 236.748 586.574 162.775 548.889C88.8013 511.204 30.2391 438.292 8.66355 353.91C-12.1414 268.71 4.81077 171.22 56.438 104.043C107.295 36.8656 193.597 0 278.358 0C363.89 0.819237 448.651 38.5041 510.295 108.139Z"
}
.frame{
padding-right: 1px;
height: 579px;
width: 595px;
/*clip-path: path(var(--pic));*/
margin-left: 8%;
margin-bottom: 5%;
position: relative;
z-index: 1;
border-radius:50%;
border:solid;
}
img{
height: 579px;
width: 595px;
border-radius:50%;
background:hotpink;
} <div class="frame">
<img src="1.png">
<div class="circle">
<div class="circle-txt"> فریلنسینگ چیست؟ </div>
</div>
</div> Комментарии:
1. эй, спасибо, это сработало, но вокруг моей рамки есть черная рамка, как я могу ее удалить? кажется, я не могу найти строку кода для этого.
2. вы изменили рамку на круг, чтобы она работала, код по-прежнему, похоже, не работает с моим собственным кадром.
3. для границы: удалите правило границы, которое я добавил, чтобы показать его . вы удалили правило пути к клипу ?
4. нет, я изменил круги, которые вы создали, и раскомментировал путь к клипу, чтобы получить результат на моем собственном кадре, и, к сожалению, проблема все еще существует!!!