Как удалить вертикальную белую линию в div острой формы?
У меня есть код, который показывает острый край div.
.yourButton {
position: relative;
width: 200px;
height: 40px;
margin-left: 40px;
color: #FFFFFF;
background-color: blue;
text-align: center;
line-height: 40px;
}
.yourButton:before {
content: "";
position: absolute;
right: 100%;
top: 0px;
width: 0px;
height: 0px;
border-top: 20px solid transparent;
border-right: 40px solid blue;
border-bottom: 20px solid transparent;
}
.yourButton:after {
content: "";
position: absolute;
left: 100%;
top: 0px;
width: 0px;
height: 0px;
border-top: 20px solid transparent;
border-left: 40px solid blue;
border-bottom: 20px solid transparent;
}<div class = "yourButton">You wanted this?</div>Проблема в том, что он показывал вертикальную линию на устройствах большего размера. Вот рабочий пример
Я пытался использовать margin или padding, но я думаю, что это неправильно, так как это искажает форму при переключении на другое устройство.
@tacoshy Я не заметил вашего ответа, так как вы уже закрыли вопрос. Можете ли вы опубликовать полный ответ? Думаю, это не ответ на вопрос. И я сделал репост своего вопроса и добавил необходимые детали; Я не уверен, что вы имели в виду под обходом.
В следующий раз отредактируйте свой вопрос, чтобы решить причину закрытия, и в этом случае его можно будет открыть повторно. Обход близкой причины путем удаления ответа и его повторной публикации по-прежнему окажет негативное влияние на ваш профиль, что может привести к запрету на публикацию вопроса.
Ответы 1
Проблема с «привязкой» псевдо или других элементов таким образом заключается в том, что система иногда пытается понять, что делать с позиционированием, когда она сопоставляет пиксели CSS с пикселями экрана. На современных устройствах может быть несколько пикселей устройства на один пиксель CSS, и один из них может остаться позади — отсюда и белая линия на некоторых уровнях масштабирования.
Чтобы преодолеть этот недостаток, идея использовать псевдоэлементы и сделать фактический элемент шире и обрезать его границу с помощью пути клипа CSS.
В этом фрагменте используются фактические значения пикселей, указанные в вопросе, но вы можете подумать об использовании значений %, чтобы получить более отзывчивый результат — это, конечно, зависит от конечной цели.
<div class = "yourButton">You wanted this?</div>
<style>
.yourButton {
position: relative;
width: 280px;
height: 40px;
margin-left: 40px;
color: #FFFFFF;
background-color: blue;
text-align: center;
line-height: 40px;
clip-path: polygon(0 50%, 40px 0, 240px 0, 100% 50%, 240px 100%, 40px 100%);
}
</style>позвольте мне попробовать это в моем конце. :)
как я уже говорил ранее (в вопросе, который вы удалили, чтобы опубликовать его снова и обойти причину закрытия), используйте
clip-path.