css градиентный прямоугольник с закругленным внизу - PullRequest
Новая
       7

css градиентный прямоугольник с закругленным внизу

0 голосов
/ 11 октября 2018

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

Это становится более очевидным, когда вы тестируете другое соотношение экрана, разница будет увеличиваться / уменьшаться при изменении размера окна.

Пример дизайна с несовпадающими градиентами

Вот плункер текущей реализации

https://next.plnkr.co/edit/D6v7qmzze43dC6ch

Как получить / вычислить градиент круга длясделать так, чтобы он идеально совпадал с прямоугольником?

Есть ли другой подход к этой проблеме?

Спасибо за потраченное время!

Ответы [ 3 ]

0 голосов
/ 11 октября 2018

Вместо «45 градусов» 

.toolbar-header {
    background: linear-gradient(45deg, #00b598, #b3eade);
 }

.picture {
  background-image: linear-gradient(45deg, #4dc4ac, #6ddac8);
 }

вместо «вправо» поставить 

.toolbar-header {
    background: linear-gradient(to right, #00b598, #b3eade);
 }

.picture {
    background-image: linear-gradient(to right, #4dc4ac, #6ddac8);
 }

или «в верхний правый угол»

0 голосов
/ 11 октября 2018

Хорошо, у меня это работает так, оно использует отсечение, но выглядит отлично, в любом случае, спасибо 

/* from flex-layout (fxLayout="row" fxlayoutalign="center stretch") */
.flex-layout {
  display: flex;
  place-content: stretch stretch;
  align-items: stretch;
  flex-direction: column;
  box-sizing: border-box;
  max-height: 100%;
}

.toolbar-header {
  background: linear-gradient(to top right, #00b598, #b3eade);
  height: 200px; /* picture size including border */
  width: 100%;
  position: absolute;
}

.rectangle-mask {
  clip-path: inset(0px 0px 30px 0px);
}

.circle-mask {
  height: 200px;
  text-align: center;
  clip-path: circle(100px at center);
}

.picture {
  margin-top: 15px;
  height: 170px;
  width: 170px;
  clip-path: circle(85px at center);
}
<!doctype html>

<html>

<head>
	<link rel="stylesheet" href="lib/style.css">
	<script src="lib/script.js">

	</script>
</head>

<body>
	<div class="flex-layout" role="heading">
		<div class="toolbar-header rectangle-mask"></div>
		<div class="toolbar-header circle-mask">
			<img class="picture" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAP1BMVEWtra3x8fGqqqr09PTw8PCoqKiysrLq6uqvr6/U1NS2trbd3d3n5+e6urrj4+PZ2dnAwMDGxsbNzc3KysrDw8PDHe7TAAAINUlEQVR4nO2d2bqrIAyFrTjPtX3/Zz3a1q0ijlmJxdN12Zv6f4GEBAjO7epyzv4Adv0I7deP0H79CO3Xj9B+/QjRUq1E/1GIsOXysiJNy7JM0yLz5EAFCBuUIr4njjuUk9zj4iZByU2ovKLOX0i62h/zuvC4KVkJlZc+IxPdADN6ph4rIyOhyh7BEt0fZPDIGBnZCFVRbcDrIKuCjZGJUBW5v5XvJT/nYmQhVFm1C+9tyIpnrDIQKu+xeXyOEJ0Hh8/BE6o0OML3YgxSPCKaUKn7Ub4X4x2OCCZUWUIBbBAT9GzEEqqUhPdWiUWEEqqaZsC33BqKiCSkTcEBInQyIgkPBMEZxAr4VThCDwaIRcQRPnGADeITNlBRhAoKiEQEEarahwICPSqGUJVYC74QQXERQqgyOF8rzOoGQugRl2ozSjzExyEIUZFeFybyAwhVivYynXxEMgUg9CImQMeJAOOUTsg1RlshximdMOMDbBCL8wlVzkqYk41IJVQpJ2CDSHY2ZBuymrBRTv1AIiFfpOhEjhhUwpwZsDGiooUMImHGbcLGiBntE2mEnLGwEzUm0ggZlzO9iAsbEiFHWjgVMVGkEQKLTwuE1XmEocQgbYZpeBYh93qmE21dQyIU8KQvQpI3pRB6iQggsZxBIQxlTNgYkTIRCYRS05A4ESmEkL20TYSU6jCFsBICpEVECmEgRegEx7+S5GmkBmljxHMIQ/7MqZNPcKYEwkLQhoSS23FCuWBBCxcEQpHU6UNISKAIhLEgYfwj/BH+CP9Twuv70svHw+uvaeRS/NPWpYK5hU8o1FiSH56UAfPvrHWi7HVTCB9idZrHSYRiAZG0N0PxNKznTEaElE1SUs1bytUEZ9W8ZTbXqNtrJEKhiUjbIqXtH4oAOs5p+4dSEZF28otG2KSI/NvAlOSQSig0TEmDlHqeRmBzhnhQgXomqhA4E0W8Ak0918Yf9Ju8gnRkiErIHhLJF0vI50u5jUjZOoQQchuRfjeIbEPmIyf0ezP0k+yMRcUIcMwbcd+CMSZSYyGGkLOqSDoqhCPk28DwaStSGCHbpRLAdZIb6P4h1wIcMEZRd0hZ/CnAj7YC3QNmOOKGuuqMussNvqwOvK4Ou48P9jZuAvowXE8F7G1nF3PLuRWMUCERgYDI3iYebKC6OQ4Q2r0F1d3ErYCA4B5DEI/qA5bbA4H7RAHiIriJErzXVxoRe31F6JZt8H5tIcnfuHmIbtjG0FWQkEy5Mf5zOPomvs24f0ODwYA3rt6X5YHWiW4AbkX3EU//UuXFOxndIGZqtsvVg3YXo8vHx9lHWN3SbX1oXT9Pb3yNhDl7QSsV1sliK+i25XVSh6wNr5n7eSuVxVVgpmx+Dao4s7qf90tKeUX8zId9vdtm5VH+jPnbld8ECNVbXlaU9T1PnCCpqkechmJvCDB6mhdYUcaPKg9au3UW/CwFgry6x2XxRmX7Cq6Ir25emNbP3PFdY0/9frC6vptUdZl5bK8IwAmbD83SRx75y05UI/Wj/FFmLNMSmwG37zxUiXOsnXfrWusUTokjVOsvIWyhjKoYGx9RFeFbFjcrGEijZNdP6gK3yIHsPbVrl30PBaxR+sEjA0EC9oC9snIYti3cHDNcqedpVHGPIIPTBBlVKZ2RdjbxliZceG9GQFpFOau/O809BOnUNMbDhDJ8L8aoptRvjhKqkqez7hzjccd6jFAVgnwvxuNlqiOEKnzKNYzo5OcHW0MfIYyJlftjct1jLmc3IbFsT2JMjhwX3kuoYob1y3bGA5fYdhIin3g4hJjsDhy7CFUhFAKXtNep7iGU7DEwL/fBRyh2Z3RZO7f5dxCePAV7ucGeybiVEHpchio32hH9NxKq8At8zFDbd/u3EarsywB3HM3cRPh1FnR2IG4hVEK9ZvdpK+IWQu+Ulfa6tq1SNxB+kxcdaZtH3UD4NXFwok2dvlcJ5bpf7Nem6wprhCqWT+e3a0sP5RVCJdgq6Yg23PNeIRRpnE+Ru+pQlwmlOl8QtNoVZJHwOxLCZa1e4Fsi/PZJ+NbaPdolQrGe6zStPCywQCjXr5umlXG6QCjwhgxGy+N0nlDZMUZfWvKns4Q2+NFOi/fcZgm/Miec01J3kDlCqdc5QEp2EyqxXmwYLaxP5whP22A6qPnFm5lQCXTWwWr+ttQMoUWR4qPZfN9IKNkiGKVZI5ptaJ8JG8QZI5oIbTThvBGNNpRrLguV2YgGQjvSwqlmYqKJ8PtLF2aZm2YZCC1bzvQyZ1FTQstWpEMZX9adEnrWApqb008IbcoLdRlL4FNCuU7reJmivk5oa6h4yxQwJoT2+plWhkxYJ/z6jYplGR6A1ggln1bhkOHwok4o9qYhk6bvRGiE3tlfSNU0JI4JbR+kpmGqEdq66O416RE2JrR4xdZpMkzHhG1yb3e4mKb6I0LLw/1beoIxJrTcfi/pXV1HhFavSTvpa9MhoS2bvsvSt4RHhJbW2DRpjwcPCa3aMpyXFi8GhHYWgqfSljVDQniX1ZMUzBFacnxmXeN4MSC0tk6qa1w37QltLrKNNS65DQivMg21iTgYpTaXETVlRkJrDnmtazQR/wivMw21idgTXmcajhP9nvDsr4IqNBCG15mG4ztRHaH9VbahhkvTP8IrFDB6DUoZf4RXWZR+5E0IpZ6jFJJfTAgvUaLpNSjWONeL960GxZqO0P5y/liRTij2eLGU/FAjzM7+IrT6mP8mvEoRqle/ffEhvEQteKRKI7yaoxm4Gueajsbp8/w3IeMDf2fpz9U413Q0A1fjXNTR9O+V/wNd2n/T4a0ndgAAAABJRU5ErkJggg==" alt="Header picture"/>
		</div>
</div>

  </body>
</html>
0 голосов
/ 11 октября 2018

Вы можете попробовать это.

<html>
  <head>
    <title>Something</title>
  </head>

  <style>
    body {
      margin: 0;
    }

    .mainDiv {
      margin: auto;
      width: 100%;
    }

    .header {
      background: #2ac2a8;
      background: linear-gradient(0deg,#2ac2a8 0%, #8fe2d2 80%);
      background: -webkit-linear-gradient(0deg,#2ac2a8 0%, #8fe2d2 80%);
      background: -moz-linear-gradient(0deg,#2ac2a8 0%, #8fe2d2 80%);
      width: 100%;
      height: 300px;
      position: absolute;
    }

    .circlePhoto {
      width: 200px;
      height: 200px;
      background: #CCCCCC;
      border: 25px solid #37c8b0;
      border-radius: 50%;
      margin: auto;
      position: relative;
      top: 100px;
    }
  </style>

  <body>
    <div class="mainDiv">
      <div class="header">
        <div class="circlePhoto"></div>
      </div>
      <div class="content"></div>
    </div>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...