英文:
Is it possible to colorize same border from different zones?
问题
有一个类似的问题在这个链接中：https://stackoverflow.com/questions/75046094/css-change-color-of-half-of-a-border 但它使用渐变。我使用的是纯色。
我有一个div标签，宽度和高度都为300x300。
我想要给边框颜色类似于这张图片：
我不知道如何创建这种边框颜色。
英文:
There's a similar question here in this link
https://stackoverflow.com/questions/75046094/css-change-color-of-half-of-a-border
but it uses gradient. I have solid colors.
I have a div tag with 300x300 width and height.
I want to give border color similar to this picture:
I have no Idea how can I create such border color
答案1
得分: 2
<!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-css -->
.container {
height: 300px;
width: 300px;
background: linear-gradient(
50deg,
yellow 0%,
yellow 50%,
navy 50%,
navy 100%
);
padding: 5px;
border-radius: 6px;
}
.container > div { background: #fff; height: 300px; width: 300px;border-radius: 6px; }
<!-- 语言: lang-html -->
<div class="container">
<div>文本内容在容器内</div>
</div>
<!-- 结束代码片段 -->
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container {
height: 300px;
width: 300px;
background: linear-gradient(
50deg,
yellow 0%,
yellow 50%,
navy 50%,
navy 100%
);
padding: 5px;
border-radius: 6px;
}
.container > div { background: #fff; height: 300px; width: 300px;border-radius: 6px; }
<!-- language: lang-html -->
<div class="container">
<div>text inside container</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论