英文:
How to make border with elongated sharp corners
问题
如何在CSS中创建这种类型的边框？
我尝试使用border-radius和(-)符号，但它不起作用。请帮助我。
我还尝试使用:after和:before属性，但它们也不起作用。
如果您有任何想法，请帮助我解决这个问题。
英文:
How to make that type of border in CSS?
I have try border-radius with (-) sign but it didn't work. Please help me.
Also İ tried to use :after :before properties but its also didn't work.
If you have any idea please help me solve this problem.
答案1
得分: 0
以下是代码部分的翻译：
.box {
--b: 4px; /* 边框厚度 */
--c: red; /* 边框颜色 */
--r: 30px; /* 半径 */
margin: 40px;
display: inline-block;
font-size: 40px;
padding: 20px;
border: var(--b) solid var(--c);
background: #fff;
border-radius: var(--r) 0 var(--r) var(--r);
position: relative;
clip-path: inset(-100px 0);
}
.box:before {
content: "";
position: absolute;
left: var(--r);
right: calc(-1*var(--b));
bottom: 100%;
height: var(--r);
border-right: var(--b) solid var(--c);
border-bottom: var(--b) solid var(--c);
border-bottom-right-radius: var(--r);
box-shadow: var(--r) var(--b) 0 #fff;
}
.box:after {
content: "";
position: absolute;
right: calc(-1*var(--b));
bottom: calc(100% - var(--b));
width: var(--b);
height: var(--r);
background: var(--c);
}
body {
background: #eee
}
希望这对你有帮助。如果你需要更多翻译，请随时告诉我。
英文:
Here is an idea using pseudo-elements. I considered CSS variables so you can easily adjust the shape without touching the code.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.box {
--b: 4px; /* border thickness */
--c: red; /* border color */
--r: 30px; /* radius */
margin: 40px;
display: inline-block;
font-size: 40px;
padding: 20px;
border: var(--b) solid var(--c);
background: #fff;
border-radius: var(--r) 0 var(--r) var(--r);
position: relative;
clip-path: inset(-100px 0);
}
.box:before {
content:"";
position: absolute;
left: var(--r);
right: calc(-1*var(--b));
bottom: 100%;
height: var(--r);
border-right: var(--b) solid var(--c);
border-bottom: var(--b) solid var(--c);
border-bottom-right-radius: var(--r);
box-shadow: var(--r) var(--b) 0 #fff;
}
.box:after {
content:"";
position: absolute;
right: calc(-1*var(--b));
bottom: calc(100% - var(--b));
width: var(--b);
height: var(--r);
background: var(--c);
}
body {
background: #eee
}
<!-- language: lang-html -->
<div class="box">
some text<br>
content
</div>
<!-- end snippet -->
答案2
得分: 0
<!-- 开始代码片段: js 隐藏: true 控制台: false Babel: false -->
<!-- 语言: lang-css -->
body {
display:flex;
height:100vh;
align-items:center;
justify-content: center;
background-color: #e7d39f;
}
div {
position:relative;
width: 200px;
height: 80px;
background: #522d5b;
border-radius:25px;
border-top-left-radius:0;
}
div:before {
content: "";
position:absolute;
top:-40px;
left:0;
height:40px;
width: 40px;
border-bottom-left-radius: 60%;
box-shadow: 0 22px 0 0 #522d5b;
}
<!-- 语言: lang-html -->
<!DOCTYPE html>
<html>
<head></head>
<body>
<div></div>
</body>
</html>
<!-- 结束代码片段 -->
Play with CSS raduises & box-shadow and see what happens! ; )
英文:
<!-- begin snippet: js hide: true console: false babel: false -->
<!-- language: lang-css -->
body {
display:flex;
height:100vh;
align-items:center;
justify-content: center;
background-color: #e7d39f;
}
div {
position:relative;
width: 200px;
height: 80px;
background: #522d5b;
border-radius:25px;
border-top-left-radius:0;
}
div:before {
content: "";
position:absolute;
top:-40px;
left:0;
height:40px;
width: 40px;
border-bottom-left-radius: 60%;
box-shadow: 0 22px 0 0 #522d5b;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head></head>
<body>
<div></div>
</body>
</html>
<!-- end snippet -->
Play with CSS raduises & box-shadow and see what happens! ; )
答案3
得分: 0
使用CSS clip-path的示例。
通过将相同的clip-path添加到稍大的包装元素来模拟边框。
灵感来源：https://stackoverflow.com/questions/31854185/how-to-add-border-in-my-clip-path-polygon-css-style
有关SVG路径的良好解释：https://stackoverflow.com/questions/10177985/svg-rounded-corner
.bubble {
background: #1997d6;
height: 150px;
width: 220px;
position: relative;
clip-path: path('M0,8 h180 a40,20 0 0 0 40,-10 v110 a40,40 0 0 1 -40,40 h-135 a40,40 0 0 1 -40,-40 v-60 a40,40 0 0 1 40,-40 z');
}
.bubble>div {
padding: 12px;
box-sizing: border-box;
position: absolute;
height: 100%;
width: 100%;
transform: scale(0.96);
color: #1997d6;
background: white;
clip-path: path('M0,8 h180 a40,20 0 0 0 40,-10 v110 a40,40 0 0 1 -40,40 h-135 a40,40 0 0 1 -40,-40 v-60 a40,40 0 0 1 40,-40 z');
}
<div className="bubble">
<div>
</div>
</div>
英文:
Example using CSS clip-path.
It mimics a border by adding the same clip-path to a slightly larger wrapping element.
Inspiration: https://stackoverflow.com/questions/31854185/how-to-add-border-in-my-clip-path-polygon-css-style
Good explanation on SVG paths: https://stackoverflow.com/questions/10177985/svg-rounded-corner
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-css -->
.bubble {
background: #1997d6;
height: 150px;
width: 220px;
position: relative;
clip-path: path('M0,8 h180 a40,20 0 0 0 40,-10 v110 a40,40 0 0 1 -40,40 h-135 a40,40 0 0 1 -40,-40 v-60 a40,40 0 0 1 40,-40 z');
}
.bubble>div {
padding: 12px;
box-sizing: border-box;
position: absolute;
height: 100%;
width: 100%;
transform: scale(0.96);
color: #1997d6;
background: white;
clip-path: path('M0,8 h180 a40,20 0 0 0 40,-10 v110 a40,40 0 0 1 -40,40 h-135 a40,40 0 0 1 -40,-40 v-60 a40,40 0 0 1 40,-40 z');
}
<!-- language: lang-html -->
<div className="bubble">
<div>
</div>
</div>
<!-- end snippet -->
答案4
得分: 0
<div class="对话框">
一些文本在这里告诉你关于生活的真相。
</div>
<div class="对话框 对话框--轮廓">
一些其他文本，展示生活有边界的时候。
</div>
body {
颜色: #3e3e3e;
边距: 4rem;
背景: #f4c1f3;
}
.对话框 {
层级: 10;
边距: 2rem;
背景: #4fc1f3;
填充: 1rem;
边框半径: 1rem 0 1rem 1rem;
显示: 行内块;
位置: 相对;
}
.对话框:after, .对话框:before {
层级: 0;
内容: "";
位置: 绝对;
顶部: 0;
变换: 平移Y(-100%);
宽度: 1rem;
高度: 1rem;
}
.对话框:before {
背景: 继承;
右侧: 0;
}
.对话框:after {
背景: #f4c1f3;
右侧: 0;
边框半径: 0 0 1rem 0;
}
.对话框--轮廓 {
层级: 100;
背景: #fff;
边框: 1px 实线 #4fc1f3;
}
.对话框--轮廓:before, .对话框--轮廓:after {
右侧: -1px;
边框: 1px 实线 透明;
右边框颜色: #4fc1f3;
}
.对话框--轮廓:before {
底边框样式: 无;
}
.对话框--轮廓:after {
底边框颜色: #4fc1f3;
}
<details>
<summary>英文:</summary>
```HTML
<div class="dialog">
Some text here to tell you the truth about life.
</div>
<div class="dialog dialog--outline">
Some other text to show you life when it has borders.
</div>
body {
color: #3e3e3e;
margin: 4rem;
background: #f4c1f3;
}
.dialog {
z-index: 10;
margin: 2rem;
background: #4fc1f3;
padding: 1rem;
border-radius: 1rem 0 1rem 1rem;
display: inline-block;
position: relative;
}
.dialog:after, .dialog:before {
z-index: 0;
content: "";
position: absolute;
top: 0;
transform: translateY(-100%);
width: 1rem;
height: 1rem;
}
.dialog:before {
background: inherit;
right: 0;
}
.dialog:after {
background: #f4c1f3;
right: 0;
border-radius: 0 0 1rem 0;
}
.dialog--outline {
z-index: 100;
background: #fff;
border: 1px solid #4fc1f3;
}
.dialog--outline:before, .dialog--outline:after {
right: -1px;
border: 1px solid transparent;
border-right-color: #4fc1f3;
}
.dialog--outline:before {
border-bottom-style: none;
}
.dialog--outline:after {
border-bottom-color: #4fc1f3;
}
答案5
得分: -1
你可以通过直接在特定元素上使用clip-path来实现，或者添加一个:before、:after或子元素作为装饰元素来处理右上角。
英文:
You can do that either by using clip-path directly on that specific element or adding a :before or :after or a child element as a decoration element to deal with the right corner.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论