Как применить цвет рамки CSS для левой стороны эллипса? - PullRequest
Новая
       8

Как применить цвет рамки CSS для левой стороны эллипса?

2 голосов
/ 24 апреля 2019

Я пытаюсь применить белую рамку только к левой стороне эллипса, а остальные стороны сделать прозрачной. Однако граница не применяется ко всей части левой стороны. Какие изменения необходимы для полученияожидаемый результат показан?

#ellipsis {
  background-color: #3ebede;
  height: 25px;
  color: #000;
  position: relative;
  padding: 4px 15px 4px 30px;
  width: 200px;
  border-radius: 20px;
  margin: -4px -25px -4px -4px;
  text-align: left;
  display: inline-block;
  border: solid;
  border-color: transparent transparent transparent white
}
<body>
  <button id="ellipsis"></button>
  <button id="ellipsis"></button>
  <button id="ellipsis"></button>

</body>

Ссылка на мой код: https://jsbin.com/bebekirano/edit?html,output

Ожидаемый результат

1 Ответ

7 голосов
/ 24 апреля 2019

рассмотрим box-shadow вместо: 

.ellipsis {
  background-color: #3ebede;
  height: 25px;
  color: #000;
  position: relative;
  padding: 4px 15px 4px 30px;
  width: 200px;
  border-radius: 20px;
  margin: -4px -25px -4px -4px;
  text-align: left;
  display: inline-block;
  box-shadow:-2px 0 0 2px #fff;
  border:none;
}
<body>
  <button class="ellipsis"></button>
  <button class="ellipsis"></button>
  <button class="ellipsis"></button>

</body>

Если вам нужна прозрачность, вот трюк с radial-gradient: 

.ellipsis {
  background-color: #3ebede;
  height: 25px;
  color: #000;
  position: relative;
  padding: 4px 15px 4px 30px;
  width: 200px;
  border-radius: 20px;
  margin: -4px -25px -4px -4px;
  text-align: left;
  display: inline-block;
  border:none;
}
.ellipsis:not(:last-child) {
  background:radial-gradient(4px 3px at right,transparent 30px,#3ebede 31px); 
}

body {
  background:#ddd;
}
<div>
  <button class="ellipsis"></button>
  <button class="ellipsis"></button>
  <button class="ellipsis"></button>

</div>
...