3

Есть кнопка и под кнопкой есть фон(картинка), нужно сделать градиент у border и сделать его круглым, и чтобы фон(картинка) была видна.
Здесь фон непрозрачный у div.

.rounded-corners-gradient-borders {
  width: 300px;
  height: 80px;
  border: double 4px transparent;
  border-radius: 80px;
  background-image: linear-gradient(white, white), radial-gradient(circle at top left, #f00,#3020ff);
  background-origin: border-box;
  background-clip: content-box, border-box;
}
<div class="rounded-corners-gradient-borders"></div>

2 ответа 2

4

.rounded-corners-gradient-borders {
  width: 250px;
  padding: 15px;
  border-left: 2px solid #f00;
  border-right: 2px solid #3020ff;
  background-image: linear-gradient(45deg, #f00, #3020ff), linear-gradient(45deg, #f00, #3020ff);
  background-size: 100% 2px;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
  border-radius: 35px;
  text-align: center;
  font-weight: bold;
  font-family: Arial;
}

.img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
<div class="rounded-corners-gradient-borders">
  Some text
</div>
<div class="img"><img src="https://via.placeholder.com/300x150"></div>

Можно попробовать с box-shadow:

.box {
  width: 250px;
  margin: 2rem 0;
  background: transparent;
  border-radius: 25px;
  text-align: center;
  padding: 15px;
}

.gradient {
  box-shadow: -2px 0 0 2px rgba(255, 0, 0, 0.8), -2px -2px 0 2px rgba(48, 32, 255, 0.3), -2px 2px 0 2px rgba(48, 32, 255, 1), 0 -2px 0 2px rgba(48, 32, 255, 1), 0 2px 0 2px rgba(48, 32, 255, 1), 2px -2px 0 2px rgba(48, 32, 255, 1), 2px 2px 0 2px rgba(48, 32, 255, 1), 2px 0 0 2px rgba(255, 0, 0, 1);
}

img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
<div class="box gradient">Some text</div>
<img src="https://via.placeholder.com/300x150">

2
  • Спасибо, это очень похоже!)
    – Maks
    9 мар 2018 в 18:48
  • @Maks, был рад помочь:)
    – Arthur
    9 мар 2018 в 18:51
1

Решение на svg .

*{
  box-sizing:border-box;
}
body{
  margin:0;
  background:linear-gradient(to right, #ddd,#cda);
  min-height:100vh;
}
.btn{
  display:inline-block;
  position:relative;
  padding:0 15px;
  text-align:center;
  width:200px;
  line-height:40px;
  cursor:pointer;
  user-select:none;
  font-weight:bold;
}
.btn__border{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.btn__border rect{
  fill:none;
  stroke:url(#gradient);
  stroke-width:3px;
  width:calc(100% - 6px);
  height:calc(100% - 6px);
}
.btn:hover rect{
  stroke:green;
}
<svg id="storage" width="0" height="0" viewbox="0 0 0 0">
  <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="10%">
    <stop offset="0%" stop-color="red"></stop>
    <stop offset="100%" stop-color="yellow"></stop>
  </linearGradient>  
</svg>

<div class="btn">
  <svg class="btn__border">
    <rect rx="5" ry="5" x="3" y="3" />
  </svg>
  <span class="btn__text">Кнопка</span>
</div>

<div class="btn">
  <svg class="btn__border">
    <rect rx="5" ry="5" x="3" y="3" />
  </svg>
  <span class="btn__text">Ещё кнопка</span>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.