css клип и основание 6 - PullRequest
Новая
       37

css клип и основание 6

0 голосов
/ 11 марта 2020

Я в тупике. Я использую этот код для создания IOS сообщения о поиске на странице часто задаваемых вопросов. Итак, я искал отправную точку и нашел этот пример .

. Я поместил его в свой код без особых изменений, чтобы увидеть результат, и элемент клипа расположен далеко вправо или влево. и, кажется, не отображается правильно. ios макет сообщения с основанием css

После долгих ухищрений мне пришло в голову, что это может быть проблемой конфликта. Поэтому я удалил Фонд 6.5.1 CSS, и он выглядел идеально.
ios макет сообщения без основы css

`

.faq {
  padding-top: 10px;
  position: relative;
  border: 1px solid #ddd;
  border-top: 0 none;
}
.message {
    border-radius: 20px 20px 20px 20px;
    margin: 0 15px 10px;
    padding: 15px 20px;
    position: relative;
}
.message.faq_q {
    background-color: [[$dark_teal]];
    color: #fff;
    margin-left: 10rem;
}
.message.faq_a {
    background-color: [[$light_teal]];
    color: #363636;
    margin-right: 10rem;
}
.message.faq_q + .message.faq_q,
.message.faq_a + .message.faq_a {
  margin-top: -7px;
}
.message:before {
    border-color: [[$dark_teal]];
    border-radius: 50% 50% 50% 50%;
    border-style: solid;
    border-width: 0 20px;
    bottom: 0;
    clip: rect(20px, 35px, 42px, 0px);
    content: " ";
    height: 40px;
    position: absolute;
    right: -50px;
    width: 30px;
    z-index: -1;
}
.message.faq_a:before {
    border-color: [[$light_teal]];
    left: -50px;
    transform: rotateY(180deg);
}`

Я знаю, что клип был заменен clip-path и что rect () должен читать inset (). Поэтому я вернул основание css и заменил код на 

clip-path: inset(20px, 35px, 42px, 0px);

, но граница, которая должна быть обрезана, теперь является полным кругом.
с использованием clip-path

Как я могу исправить эту проблему?

...