英文:
How do I make this shape using HTML and CSS?
问题
我计划在我的网站上添加一个分隔符，它的形状如下，并且旁边还有一些其他赞助品牌的标志。
我希望这是一个HTML块，因为我尝试使用inDesign制作它并将其添加到我的网站上作为图像，但颜色不匹配。而且将来我计划为单独的标志添加链接。
我尝试使用inDesign、绘图和PS，但颜色不匹配。
只是想知道这是否可能，提前感谢。
英文:
I am planning to add a seperator to my website that has this shape and some logos of other sponsored brands next to it.
Sketched this out using inDesign
I want this to be a html block becuase I tried using inDesign to make it and add it to my website as an image but the colors do not match. And also in the future I'm planning to give the individual logos their links.
I tried using inDesign, paint and PS but colors do not match.
Just wondering if this is possible thanks in advance.
答案1
得分: 1
以下是您要翻译的内容：
"I'm figuring that you're trying to create this in html and css so I did a quick make an came up with what's below.
I created a div which contained the whole divider spanning the width of the screen.
Inside this I decided to break up the art into a large rectangle for the dark yellow which and a upside down right angle triangle connecting it to make the seamless shape. I then put in a triangle with uneven sides on it to be in the background. There is also a div with a class of logo-box which I left for further addition on your end.
So here's my solution:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
:root{
--dark-yellow: #eaeb87;
--light-yellow: #f5f6d3;
}
.divider{
width: 100vw;
height: 75px;
}
.yellow-box{
width: 50%;
height: 75px;
background-color: var(--dark-yellow);
z-index: 2;
position: absolute;
top: 0;
left: 0;
}
.yellow-triangle{
height: 0;
width: 0;
border-top: 75px solid var(--dark-yellow);
border-right: 38px solid transparent;
z-index: 2;
position: absolute;
top: 0;
left: 50%;
}
.light-yellow-background{
height: 0;
width: 0;
border-top: 75px solid var(--light-yellow);
border-right: 28px solid transparent;
border-left: 48px solid transparent;
z-index: 1;
position: absolute;
top: 0;
left: 47.5%;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div class="divider">
<div class="yellow-box"></div>
<div class="yellow-triangle"></div>
<div class="light-yellow-background"></div>
<div class="logo-box"></div>
</div>
</body>
</html>
<!-- end snippet -->
I suggest you tinker with it as it's not perfect.
The light yellow triangle in the background layer isn't quite good for responsiveness to screen size so you should probably tinker with it if you're not satisfied but if I do come up with a solution for it I will update this answer.
Hope this helps."
英文:
I'm figuring that you're trying to create this in html and css so I did a quick make an came up with what's below.
I created a div which contained the whole divider spanning the width of the screen.
Inside this I decided to break up the art into a large rectangle for the dark yellow which and a upside down right angle triangle connecting it to make the seamless shape. I then put in a triangle with uneven sides on it to be in the background. There is also a div with a class of logo-box which I left for further addition on your end.
So here's my solution:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
:root{
--dark-yellow: #eaeb87;
--light-yellow: #f5f6d3;
}
.divider{
width: 100vw;
height: 75px;
}
.yellow-box{
width: 50%;
height: 75px;
background-color: var(--dark-yellow);
z-index: 2;
position: absolute;
top: 0;
left: 0;
}
.yellow-triangle{
height: 0;
width: 0;
border-top: 75px solid var(--dark-yellow);
border-right: 38px solid transparent;
z-index: 2;
position: absolute;
top: 0;
left: 50%;
}
.light-yellow-background{
height: 0;
width: 0;
border-top: 75px solid var(--light-yellow);
border-right: 28px solid transparent;
border-left: 48px solid transparent;
z-index: 1;
position: absolute;
top: 0;
left: 47.5%;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div class="divider">
<div class="yellow-box"></div>
<div class="yellow-triangle"></div>
<div class="light-yellow-background"></div>
<div class="logo-box"></div>
</div>
</body>
</html>
<!-- end snippet -->
I suggest you tinker with it as it's not perfect.
The light yellow triangle in the background layer isn't quite good for responsiveness to screen size so you should probably tinker with it if you're not satisfied but if I do come up with a solution for it I will update this answer.
Hope this helps.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论