2020年新年大赛！

Question

EXOTIC 12

Asked:2020-01-22 00:18:00 +0000 UTC2020-01-22 00:18:00 +0000 UTC 2020-01-22 00:18:00 +0000 UTC

如何进行平滑弯曲 - 从菜单的红色部分过渡到黑色

772

这可以使用 CSS 完成吗？还是必须要拍一张？

7 个回答

Voted

Sevastopol' · Answer 1 · 2020-01-22T18:28:36Z

纯 CSS 解决方案

诚然，一个非常小的缺陷是可见的，但如果你仔细观察，这已经是。我认为网站用户通常不会这样做:) 但是有一个渐变，整个想法已经解决了 99.9%。

UPD改进了答案。现在缺陷几乎是看不见的。我还考虑了@Alexandr_TT 和@ArtemGorlachev 的评论，并添加了一个额外的自适应选项。适应性当然不是我想要的，但我会尝试改进它。

.nav {
  position: relative;
  overflow: hidden;
  height: 80px;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 10px;
}

.nav__left {
  position: relative;
  overflow: hidden;
  float: left;
  height: 80px;
  width: 49%;
  background: linear-gradient(to bottom, red, darkred);
}

.nav__right {
  position: relative;
  overflow: hidden;
  float: right;
  height: 80px;
  width: 49%;
  background: linear-gradient(to bottom, gray, black);
}

.transition {
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 80px;
  width: 180px;
}

.transition__red {
  position: absolute;
  left: 0;
  top: 0;
  height: 80px;
  width: 100px;
  background: linear-gradient(to bottom, gray, black);
}

.transition__red:after {
  content: "";
  display: block;
  height: 80px;
  width: 100px;
  border-radius: 0px 90px 0px 0px / 0px 100% 0px 0px;
  background: linear-gradient(to bottom, red, darkred);
}

.transition__black {
  position: absolute;
  right: 0;
  top: 0;
  height: 80px;
  width: 100px;
  background: linear-gradient(to bottom, red, darkred);
}

.transition__black:after {
  content: "";
  display: block;
  height: 80px;
  width: 100px;
  border-radius: 0 0 0 100% / 0 0 0 100%;
  background: linear-gradient(to bottom, gray, black);
}

.transition__clear {
  position: absolute;
  left: -56px;
  top: 0px;
  width: 170px;
  height: 80px;
  border-radius: 0 100% 0 0;
  background: linear-gradient(to bottom, red, darkred);
}

.transition__clear:after {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  left: -151px;
  width: 300px;
  height: 80px;
  border-radius: 0% 60% 0% 0%;
  background: linear-gradient(to bottom, red, darkred);
}

span {
  margin: 0 20px;
  color: white;
  line-height: 80px;
  font-size: 20px;
  font-family: monospace;
}

.nav__left span {
  float: left;
}

.nav__right span {
  float: right;
}

.block__left {
  position: relative;
  overflow: hidden;
  float: left;
  height: 80px;
  width: 49%;
  border-radius: 5px;
  background: linear-gradient(to bottom, red, darkred);
}

.block__right {
  position: relative;
  overflow: hidden;
  float: right;
  height: 80px;
  width: 49%;
  border-radius: 5px;
  background: linear-gradient(to bottom, gray, black);
}

<div class="nav">
  <div class="nav__left"><span>А-ля Left</span></div>
  <div class="nav__right"><span>А-ля Right</span></div>
  <div class="transition">
    <div class="transition__black">
    </div>
    <div class="transition__red">
    </div>
    <div class="transition__clear"></div>
  </div>
</div>
<div class="block__left"></div>
<div class="block__right"></div>

自适应选项：

body,
html {
  margin: 0;
  padding: 0;
}

.nav {
  position: relative;
  overflow: hidden;
  height: 100vh;
  min-height: 80px;
  max-height: 30vh;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 10px;
}

.nav__left {
  position: relative;
  overflow: hidden;
  float: left;
  height: 100vh;
  min-height: 80px;
  max-height: 30vh;
  width: 49%;
  background: linear-gradient(to bottom, red, darkred);
}

.nav__right {
  position: relative;
  overflow: hidden;
  float: right;
  height: 100vh;
  min-height: 80px;
  max-height: 30vh;
  width: 49%;
  background: linear-gradient(to bottom, gray, black);
}

.transition {
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 100vh;
  min-height: 80px;
  max-height: 30vh;
  width: 180px;
}

.transition__red {
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
  min-height: 80px;
  max-height: 30vh;
  width: 100px;
  background: linear-gradient(to bottom, gray, black);
}

.transition__red:after {
  content: "";
  display: block;
  height: 100vh;
  min-height: 80px;
  max-height: 30vh;
  width: 100px;
  border-radius: 0px 90px 0px 0px / 0px 100% 0px 0px;
  background: linear-gradient(to bottom, red, darkred);
}

.transition__black {
  position: absolute;
  right: 0;
  top: 0;
  height: 100vh;
  min-height: 80px;
  max-height: 30vh;
  width: 100px;
  background: linear-gradient(to bottom, red, darkred);
}

.transition__black:after {
  content: "";
  display: block;
  height: 100vh;
  min-height: 80px;
  max-height: 30vh;
  width: 100px;
  border-radius: 0 0 0 100% / 0 0 0 100%;
  background: linear-gradient(to bottom, gray, black);
}

.transition__clear {
  position: absolute;
  left: -56px;
  top: 0px;
  width: 170px;
  height: 100vh;
  min-height: 80px;
  max-height: 30vh;
  border-radius: 0 100% 0 0;
  background: linear-gradient(to bottom, red, darkred);
}

.transition__clear:after {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  left: -151px;
  width: 300px;
  height: 100vh;
  min-height: 80px;
  max-height: 30vh;
  border-radius: 0% 60% 0% 0%;
  background: linear-gradient(to bottom, red, darkred);
}

span {
  margin: 0 20px;
  color: white;
  line-height: 80px;
  font-size: 20px;
  font-family: monospace;
}

.nav__left span {
  float: left;
}

.nav__right span {
  float: right;
}

<div class="nav">
  <div class="nav__left"><span>А-ля Left</span></div>
  <div class="nav__right"><span>А-ля Right</span></div>
  <div class="transition">
    <div class="transition__black">
    </div>
    <div class="transition__red">
    </div>
    <div class="transition__clear"></div>
  </div>
</div>

Stranger in the Q · Answer 2 · 2020-01-22T21:26:23Z

Stranger in the Q

2020-01-22T21:26:23Z2020-01-22T21:26:23Z

在这里，如果你喜欢，关于渐变：

.top, .bottom {
  height: 22.5px;
  --r: 30px;
  --g: radial-gradient(
          circle at calc(50% - calc(var(--o) * 50%)) 0, 
          var(--c1), 
          var(--c1) calc(50% - var(--r)), 
          #0000 calc(2px + calc(50% - var(--r)))),
       radial-gradient(
          circle at calc(50% - calc(calc(var(--o) * var(--r)))) calc(50% + calc(var(--o) * 80%)), 
          var(--c1), 
          var(--c1) calc(var(--r) - 1px), 
          var(--c2) calc(var(--r) + 1px));
}

.top {
  --c1: red;
  --c2: black;
  --o: 0.98;
  background: var(--g);
}

.bottom {
  --c1: black;
  --c2: red;
  --o: -0.98;
  background: var(--g);
}

<div class="top"></div>
<div class="bottom"></div>

10

Monkey Mutant · Answer 3 · 2020-01-22T01:22:43Z

就是这样完成的！

如果您需要详细信息 - 问 - 我会用截图解释

制作了一个菜单并将其改编为 codepen... codepen.io

* {
  box-sizing: border-box;
}

ul {
  display: flex;
  list-style: none;
  position: relative;
  height: 45px;
  width: 480px;
  align-items: center;
  background: #b83d2e;
}

li {
  width: 100%;
}

li a {
  color: #fff;
  font-size: ;
  text-decoration: none;
}

.svg {
  position: absolute;
  left: 100%;
  top: 0;
  width: 170px;
  height: 45px;
  overflow: hidden;
}

<ul>
  <li>
    <a href="">ссылка №1</a>

  </li>
  <li>
    <a href="">ссылка №2</a>

  </li>
  <li>
    <a href="">ссылка №3</a>

  </li>
  <li>
    <a href="">ссылка №4</a>
    <div class="svg">
      <svg width="170mm" height="45mm" xmlns="http://www.w3.org/2000/svg">
           <g transform="translate(-1,-251.95859)">
           <path d="m1.00005 252.20983-1.511905 44.79017 170.46726-0.56696c-28.27272-4.30384-41.00151-28.7266-55.86311-34.64265-27.001632-10.74869-52.971732-10.13029-113.04224-9.58056z" fill="#b83d2e"/>
      </g>
      </svg>
    </div>
  </li>
</ul>

您也不能在 html 中显示 svg 代码，在这种情况下，您可以这样做：

ul,
li,
a {
  list-style: none;
  text-decoration: none;
  font-size: 20px;
  margin: 0;
  padding: 0;
}

ul {
  display: flex;
  align-items: center;
  width: 480px;
  height: 45px;
  background: #b03023;
  position: relative;
}

ul li {
  width: 100%;
  text-align: center;
}

ul li a {
  color: #fff;
}

.svg {
  display: block;
  width: 164px;
  height: 45px;
  position: absolute;
  left: 100%;
  top: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='164.42mm' height='44.790192mm' version='1.1' viewBox='0 0 164.42 44.790192' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(-2,-252.20981)'%3E%3Cpath d='M 164.42,296.811 C 108.15057,294.33073 97.997565,253.78942 62.744187,252.96577 L 0,252.20981 0.18899041,297 Z' fill='%23b03023'/%3E%3C/g%3E%3C/svg%3E%0A");
  background-size: 100% 100%;
}

<ul>
  <li>
    <a href="#">Ссылка №1</a>
  </li>
  <li>
    <a href="#">Ссылка №2</a>
  </li>
  <li>
    <a href="#">Ссылка №3</a>
  </li>
  <div class="svg"></div>
</ul>

Alexandr_TT · Answer 4 · 2020-01-23T04:27:19Z

该应用程序是完全响应的。

适用于所有浏览器，包括MS Edge

颜色，渐变尽可能接近原始。

.container {
width:100%;
height:100%;
}
.partBlack {
fill:url(#LGblack);
}
.partRed {
fill:url(#LGred);
}
.textRed {
font-size:72px;
fill:white;
}

.textBlack {
font-size:72px;
fill:white;
}

<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 1388 868" preserveAspectRatio="xMinYMin meet">
   
   <defs>
    <linearGradient id="LGred" x2="0%" y2="100%">
	  <stop offset="0%" stop-color="#C14A3A"/>
	   <stop offset="100%" stop-color="#A31D12"/>
	</linearGradient>  
       <linearGradient id="LGblack" x2="0%" y2="100%">
	  <stop offset="0%" stop-color="#444444"/>
	   <stop offset="100%" stop-color="#202020"/>
	</linearGradient>	
   </defs>
   <rect class="partBlack" x="4" y="260" width="1388" height="165"/>
   
   <path class="partRed"  d="M3.4 259.4H507.1c22.7 0 45.3 4.2 67.5 9.2 26.7 6 52.9 14.2 78.2 24.6 13.1 5.4 25.5 12.3 37.7 19.5 12.1 7.1 23.8 15.1 35.1 23.4 12.1 9 23.1 19.4 35.1 28.6 11.9 9 24 17.7 36.4 26 10.2 6.8 20.1 14.4 31.2 19.5 7.9 3.6 16.5 5.6 25 7.7 12.9 3.3 45.1 7.7 39.2 7.7L3.4 424.6Z" />  
   
    <text class="textRed" x="200" y="350" font-size="72px" fill="white">Контакты</text> 
	  <text class="textBlack" x="850" y="350">тел.(650)5559462</text>
</svg>
</div>

Sevastopol' · Answer 5 · 2020-01-25T00:50:37Z

纯 CSS 解决方案 #2

尽可能短。简而言之，你无法想象。

完全 100% 响应。

适用于所有浏览器，无一例外。

.nav {
  display: inline-block;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.adaptive { margin-top: 15%; }
.nav__wrp {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.nav__left, .nav__right {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 50%;
}
.nav__left { float: left; background: linear-gradient(to bottom, red, darkred); }
.nav__right { float: right; background: linear-gradient(to bottom, gray, black); }
.nav__left:before, .nav__right:before, .nav__left:after, .nav__right:after {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 103%;
  top: 0;
}
.nav__left:before { right: 0; background: linear-gradient(to bottom, gray, black); }
.nav__right:before { left: 0; background: linear-gradient(to bottom, red, darkred); }
.nav__left:after { right: -3%; background: linear-gradient(to bottom, red, darkred); border-radius: 0 70% 0 0; }
.nav__right:after { left: -3%; background: linear-gradient(to bottom, gray, black); border-radius: 0 0 0 70%; }

<div class="nav">
<div class="adaptive"></div>
<div class="nav__wrp"><div class="nav__left"></div><div class="nav__right"></div></div>
</div>

Artem Gorlachev · Answer 6 · 2020-01-22T20:31:49Z

最简单的（可能也是最合理的）是插入一个静态图像作为背景，但无法控制它，但可以简单地拉伸它。

随着使用clip-path它变得越来越困难和肮脏 - 它无法充分拉伸，“形状”本身必须投入到html中（基本矢量控件已放在最远的框中，clip-path: path()现在工作草稿，并且仅支持在火狐中）。Safari 取消了导入部分 svg 的功能，并且通过与样式类比，可以将所有形状存储在单独的 svg 中。

这是我的干净，像往常一样，使用 svg/clip-path 的手写实现：

nav {
  background: linear-gradient(to bottom, gray, black);
  border-radius: 5px;
  overflow: hidden;
  font: 14px/20px Arial;
  display: flex;
}

nav li {
  list-style: none;
  color: #FFF;
  padding: 10px 10px 10px 70px;
  background: linear-gradient(to bottom, red, darkred);
  position: relative;
}

nav li.active ~ li {
  background: transparent;
}

nav li.active:before {
  content: '';
  display: block;
  background: rgba(0,0,0,.4);
  position: absolute;
  right: -79px; /* артефакты на ретине */
  bottom: 0;
  top: 0;
  width: 80px;
  background: linear-gradient(to bottom, red, darkred);
  clip-path: url(#navDivider);
}

<nav>
  <li>Home</li>
  <li class="active">About</li>
  <li>Contacts</li>
</nav>

<svg>
  <defs>
    <clipPath id="navDivider" transform="scale(40)">
      <path d="M 0 0 C 1 0, 1 1, 2 1 S 1 1, 0 1"/>
    </clipPath>
  </defs>
</svg>

adudnik.ru · Answer 7 · 2020-01-22T00:43:40Z

这可以使用 CSS 完成吗？

是的你可以。

但最好是用一张图片来做这件事，并通过 background-image 或作为一个绝对定位的元素将它放在正确的位置。（例如，通过之前的伪元素）。

你也可以用 CSS 来做到这一点，但你要么写几页边界半径代码，要么最终得到多边形/路径和 SVG 图形。

第一个解决方案（纯 CSS）是不必要的混乱和代码复杂性。

第二种解决方案（剪辑路径 + SVG）本质上是用 SVG 图像替换 PNG 图像（在您的特定情况下）。

在巨大的 CSS、clip-path 和 SVG 中，只有创建漂亮的动画和过渡才有意义。（我在下面附上了一个正确用法的例子。）

你要证据吗？

向下滚动并查看其他解决方案。聪明的人会变得聪明，并且几乎准备好互相对刀，找出谁的 CSS 更好。

现在想象一下，您不仅需要这样做，而且还需要在将来为它服务。此外，服务的不是你，而是管理层在自由职业者中找到的有条件的“Lech实习生”。

炫耀工具包的愿望只适合这样的专业社区。在实际开发中，您需要使用最简单的选项来解决问题。这降低了成本，降低了进入项目的门槛，方便了进一步的维护。

正确使用 CSS 多边形和 SVG

如果您有兴趣阅读有关多边形及其在 css 中的正确使用的信息，这里有一个示例，说明使用这些工具是合理的：

使用 Clip-Path 创建很酷的形状并打破熟悉的盒子模型

如果您对 SVG 及其动画相关的所有内容感兴趣： https ://svg-art.ru/

该网站的创建者坐在这里并定期回答问题。个人资料：@Alexandr_TT

如何进行平滑弯曲 - 从菜单的红色部分过渡到黑色

纯 CSS 解决方案

自适应选项：

该应用程序是完全响应的。

适用于所有浏览器，包括MS Edge

纯 CSS 解决方案 #2

是的你可以。

你要证据吗？

正确使用 CSS 多边形和 SVG

如何从列表中打印最大元素（str 类型）的长度？

如何在 PyQT5 中清除 QFrame 的内容

如何将具有特定字符的字符串拆分为两个不同的列表？

导航栏活动元素

是否可以将文本放入数组中？[关闭]

如何一次用多个分隔符拆分字符串？

如何通过 ClassPath 创建 InputStream？

在一个查询中连接多个表

对列表列表中的所有值求和

如何对齐 string.Format 中的列？

如何进行平滑弯曲 - 从菜单的红色部分过渡到黑色

7 个回答

纯 CSS 解决方案

自适应选项：

该应用程序是完全响应的。

适用于所有浏览器，包括MS Edge

纯 CSS 解决方案 #2

是的你可以。

你要证据吗？

正确使用 CSS 多边形和 SVG

相关问题