英文:
Recreating shape using CSS
问题
我正在尝试仅使用CSS重新创建下面图片中的形状。
这是我尝试过的：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<svg width="450" height="50">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#555;stop-opacity:1" />
<stop offset="100%" style="stop-color:#333;stop-opacity:1" />
</linearGradient>
<filter id="f1" x="0" y="0">
<feDropShadow dx="0" dy="4" stdDeviation="3"/>
</filter>
</defs>
<path d="M0,0 L450,0 L450,20 L300,20 C270,20 250,50 230,50 L0,50 Z" fill="url(#grad1)" />
<path d="M0,0 L450,0 L450,20 L300,20 C270,20 250,50 230,50 L0,50 Z" fill="transparent" filter="url(#f1)" />
</svg>
<!-- end snippet -->
这很相似，但不是我想要实现的完全相同的曲线，并且我使用了SVG。如何使用CSS完成，并实现完全相同的曲线？
这是我在CSS中遇到的问题（我已经用红色标记了曲线的位置）：
<!DOCTYPE html>
<html>
<head>
<style>
#top-rectangle {
height: 50px;
width: 250px;
background-color: #555;
}
#bottom-rectangle {
height: 20px;
width: 250px;
background-color: #555;
margin-left: 250px;
margin-top: -50px;
}
#curve {
height: 30px;
width: 2px;
background-color: red;
margin-left: 250px;
}
#curve2 {
height: 2px;
width: 30px;
background-color: red;
margin-left: 250px;
margin-top: -30px;
}
</style>
</head>
<body>
<div id="top-rectangle"></div>
<div id="bottom-rectangle"></div>
<div id="curve"></div>
<div id="curve2"></div>
</body>
</html>
英文:
I'm trying to recreate the shape from the image below with CSS only.
This is what I've tried:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<svg width="450" height="50">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#555;stop-opacity:1" />
<stop offset="100%" style="stop-color:#333;stop-opacity:1" />
</linearGradient>
<filter id="f1" x="0" y="0">
<feDropShadow dx="0" dy="4" stdDeviation="3"/>
</filter>
</defs>
<path d="M0,0 L450,0 L450,20 L300,20 C270,20 250,50 230,50 L0,50 Z" fill="url(#grad1)" />
<path d="M0,0 L450,0 L450,20 L300,20 C270,20 250,50 230,50 L0,50 Z" fill="transparent" filter="url(#f1)" />
</svg>
<!-- end snippet -->
It is very similar but it is not the same curve I want to achieve and I've used SVG. How to do it with CSS and how to make exactly the same curve?
Here is where I' am stuck with css (I've marked the place for the curve with red color):
<!DOCTYPE html>
<html>
<head>
<style>
#top-rectangle {
height: 50px;
width: 250px;
background-color: #555;
}
#bottom-rectangle {
height: 20px;
width: 250px;
background-color: #555;
margin-left: 250px;
margin-top: -50px;
}
#curve {
height: 30px;
width: 2px;
background-color: red;
margin-left: 250px;
}
#curve2 {
height: 2px;
width: 30px;
background-color: red;
margin-left: 250px;
margin-top: -30px;
}
</style>
</head>
<body>
<div id="top-rectangle"></div>
<div id="bottom-rectangle"></div>
<div id="curve"></div>
<div id="curve2"></div>
</body>
</html>
答案1
得分: 0
使用CSS，通常可以通过使用圆角（border-radius）或径向渐变（radial-gradient）来实现曲线形状。互联网上有各种文章可以解释这一点，例如：https://css-tricks.com/how-to-create-wavy-shapes-patterns-in-css/
另一种方法是混合两个梯度（一个水平，一个垂直），具有极高的对比度。效果有些模糊和粗糙；您可能需要调整属性以正确塑造曲线。但它确实非常紧凑。在其最基本的形式中，您只需要这样：
background-image:
linear-gradient(to bottom, #3e3e3e, #c1c1c1),
linear-gradient(to right, black 65%, white 75%);
background-blend-mode: hard-light, normal;
filter: contrast(99);
这是一个完整的演示：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.tabstrip {
background-image:
linear-gradient(to bottom, #3e3e3e, #c1c1c1),
linear-gradient(to right, black 65%, white 72%);
background-blend-mode: hard-light, normal;
mix-blend-mode: lighten;
filter: contrast(99);
height: 25px;
}
.demo {
background: linear-gradient(#555, #333);
border: thin black solid;
color: green;
position: absolute;
width: 90%;
}
.above {
color: white;
padding: 2px;
}
.under {
background: white;
color: black;
padding: 2px;
}
.left {
color: white;
left: 0;
padding: 2px;
position: absolute;
z-index: 1;
}
.right {
color: black;
right: 0;
padding: 2px;
position: absolute;
z-index: 1;
}
<!-- language: lang-html -->
<div class="demo">
<div class="above">Above tabstrip</div>
<div class="left">Left</div>
<div class="right">Right</div>
<div class="tabstrip"></div>
<div class="under">Underneath tabstrip</div>
</div>
<!-- end snippet -->
英文:
With CSS, curved shapes are typically achieved by using
rounded corners
(border-radius)
or radial gradients
(radial-gradient).
There are various articles on the internet to explain this, for example:
https://css-tricks.com/how-to-create-wavy-shapes-patterns-in-css/
An alternative approach is to blend two gradients (one horizontal, one vertical) with extremely high contrast.
The effect is obscure and a bit crude; you may need to play around with the attributes to properly shape the curve.
But it sure is compact. In its most basic form, all you need is this:
background-image:
linear-gradient(to bottom, #3e3e3e, #c1c1c1),
linear-gradient(to right, black 65%, white 75%);
background-blend-mode: hard-light, normal;
filter: contrast(99);
Here's a complete demo:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.tabstrip {
background-image:
linear-gradient(to bottom, #3e3e3e, #c1c1c1),
linear-gradient(to right, black 65%, white 72%);
background-blend-mode: hard-light, normal;
mix-blend-mode: lighten;
filter: contrast(99);
height: 25px;
}
.demo {
background: linear-gradient(#555, #333);
border: thin black solid;
color: green;
position: absolute;
width: 90%;
}
.above {
color: white;
padding: 2px;
}
.under {
background: white;
color: black;
padding: 2px;
}
.left {
color: white;
left: 0;
padding: 2px;
position: absolute;
z-index: 1;
}
.right {
color: black;
right: 0;
padding: 2px;
position: absolute;
z-index: 1;
}
<!-- language: lang-html -->
<div class="demo">
<div class="above">Above tabstrip</div>
<div class="left">Left</div>
<div class="right">Right</div>
<div class="tabstrip"></div>
<div class="under">Underneath tabstrip</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论