Mixing
svg border corners with inner border
2
I have a some block, with some design:
And I have some svg code:
.box {
position: relative;
margin: .75em auto 0;
max-width: 255px;
min-height: 56px;
}
svg {
position: absolute;
width: 100%; height: 100%;
}<div class='box'>
<svg>
<mask id='m' fill='#fff'>
<rect id='r' width='256' height='56'/>
<circle id='c' r='10' fill='#000'/>
<use xlink:href='#c' x='100%'/>
<use xlink:href='#c' y='100%'/>
<use xlink:href='#c' x='100%' y='100%'/>
</mask>
<mask id='m2' fill='#fff'>
<rect id='r2' width='248' height='50' x="4" y="4" />
<circle id='c2' r='14' fill='#000' stroke='#000'/>
<use xlink:href='#c2' x='100%' />
<use xlink:href='#c2' y='100%'/>
<use xlink:href='#c2' x='100%' y='100%'/>
</mask>
<use xlink:href='#r' fill='red' mask='url(#m)'/>
<use xlink:href='#r2' fill='none' stroke="#000" mask='url(#m2)'/>
</svg>
</div>Question: how to make inside a block with the same rounded cut corners, but not with a solid fill and stroke?
P.S: it should remain the ability to edit the radius of the rounding corners, indents vn. blocks. Perhaps there is a simple implementation on css (maximum cross-browser), would also be suitable.
html css svg
asked Nov 20 '18 at 12:09
HamSterHamSter
3511825
add a comment |
2
I have a some block, with some design:
And I have some svg code:
.box {
position: relative;
margin: .75em auto 0;
max-width: 255px;
min-height: 56px;
}
svg {
position: absolute;
width: 100%; height: 100%;
}<div class='box'>
<svg>
<mask id='m' fill='#fff'>
<rect id='r' width='256' height='56'/>
<circle id='c' r='10' fill='#000'/>
<use xlink:href='#c' x='100%'/>
<use xlink:href='#c' y='100%'/>
<use xlink:href='#c' x='100%' y='100%'/>
</mask>
<mask id='m2' fill='#fff'>
<rect id='r2' width='248' height='50' x="4" y="4" />
<circle id='c2' r='14' fill='#000' stroke='#000'/>
<use xlink:href='#c2' x='100%' />
<use xlink:href='#c2' y='100%'/>
<use xlink:href='#c2' x='100%' y='100%'/>
</mask>
<use xlink:href='#r' fill='red' mask='url(#m)'/>
<use xlink:href='#r2' fill='none' stroke="#000" mask='url(#m2)'/>
</svg>
</div>Question: how to make inside a block with the same rounded cut corners, but not with a solid fill and stroke?
P.S: it should remain the ability to edit the radius of the rounding corners, indents vn. blocks. Perhaps there is a simple implementation on css (maximum cross-browser), would also be suitable.
html css svg
asked Nov 20 '18 at 12:09
HamSterHamSter
3511825
add a comment |
2
2
2
I have a some block, with some design:
And I have some svg code:
.box {
position: relative;
margin: .75em auto 0;
max-width: 255px;
min-height: 56px;
}
svg {
position: absolute;
width: 100%; height: 100%;
}<div class='box'>
<svg>
<mask id='m' fill='#fff'>
<rect id='r' width='256' height='56'/>
<circle id='c' r='10' fill='#000'/>
<use xlink:href='#c' x='100%'/>
<use xlink:href='#c' y='100%'/>
<use xlink:href='#c' x='100%' y='100%'/>
</mask>
<mask id='m2' fill='#fff'>
<rect id='r2' width='248' height='50' x="4" y="4" />
<circle id='c2' r='14' fill='#000' stroke='#000'/>
<use xlink:href='#c2' x='100%' />
<use xlink:href='#c2' y='100%'/>
<use xlink:href='#c2' x='100%' y='100%'/>
</mask>
<use xlink:href='#r' fill='red' mask='url(#m)'/>
<use xlink:href='#r2' fill='none' stroke="#000" mask='url(#m2)'/>
</svg>
</div>Question: how to make inside a block with the same rounded cut corners, but not with a solid fill and stroke?
P.S: it should remain the ability to edit the radius of the rounding corners, indents vn. blocks. Perhaps there is a simple implementation on css (maximum cross-browser), would also be suitable.
html css svg
asked Nov 20 '18 at 12:09
HamSterHamSter
3511825
I have a some block, with some design:
And I have some svg code:
.box {
position: relative;
margin: .75em auto 0;
max-width: 255px;
min-height: 56px;
}
svg {
position: absolute;
width: 100%; height: 100%;
}<div class='box'>
<svg>
<mask id='m' fill='#fff'>
<rect id='r' width='256' height='56'/>
<circle id='c' r='10' fill='#000'/>
<use xlink:href='#c' x='100%'/>
<use xlink:href='#c' y='100%'/>
<use xlink:href='#c' x='100%' y='100%'/>
</mask>
<mask id='m2' fill='#fff'>
<rect id='r2' width='248' height='50' x="4" y="4" />
<circle id='c2' r='14' fill='#000' stroke='#000'/>
<use xlink:href='#c2' x='100%' />
<use xlink:href='#c2' y='100%'/>
<use xlink:href='#c2' x='100%' y='100%'/>
</mask>
<use xlink:href='#r' fill='red' mask='url(#m)'/>
<use xlink:href='#r2' fill='none' stroke="#000" mask='url(#m2)'/>
</svg>
</div>Question: how to make inside a block with the same rounded cut corners, but not with a solid fill and stroke?
P.S: it should remain the ability to edit the radius of the rounding corners, indents vn. blocks. Perhaps there is a simple implementation on css (maximum cross-browser), would also be suitable.
.box {
position: relative;
margin: .75em auto 0;
max-width: 255px;
min-height: 56px;
}
svg {
position: absolute;
width: 100%; height: 100%;
}<div class='box'>
<svg>
<mask id='m' fill='#fff'>
<rect id='r' width='256' height='56'/>
<circle id='c' r='10' fill='#000'/>
<use xlink:href='#c' x='100%'/>
<use xlink:href='#c' y='100%'/>
<use xlink:href='#c' x='100%' y='100%'/>
</mask>
<mask id='m2' fill='#fff'>
<rect id='r2' width='248' height='50' x="4" y="4" />
<circle id='c2' r='14' fill='#000' stroke='#000'/>
<use xlink:href='#c2' x='100%' />
<use xlink:href='#c2' y='100%'/>
<use xlink:href='#c2' x='100%' y='100%'/>
</mask>
<use xlink:href='#r' fill='red' mask='url(#m)'/>
<use xlink:href='#r2' fill='none' stroke="#000" mask='url(#m2)'/>
</svg>
</div>.box {
position: relative;
margin: .75em auto 0;
max-width: 255px;
min-height: 56px;
}
svg {
position: absolute;
width: 100%; height: 100%;
}<div class='box'>
<svg>
<mask id='m' fill='#fff'>
<rect id='r' width='256' height='56'/>
<circle id='c' r='10' fill='#000'/>
<use xlink:href='#c' x='100%'/>
<use xlink:href='#c' y='100%'/>
<use xlink:href='#c' x='100%' y='100%'/>
</mask>
<mask id='m2' fill='#fff'>
<rect id='r2' width='248' height='50' x="4" y="4" />
<circle id='c2' r='14' fill='#000' stroke='#000'/>
<use xlink:href='#c2' x='100%' />
<use xlink:href='#c2' y='100%'/>
<use xlink:href='#c2' x='100%' y='100%'/>
</mask>
<use xlink:href='#r' fill='red' mask='url(#m)'/>
<use xlink:href='#r2' fill='none' stroke="#000" mask='url(#m2)'/>
</svg>
</div>html css svg
html css svg
asked Nov 20 '18 at 12:09
HamSterHamSter
3511825
asked Nov 20 '18 at 12:09
HamSterHamSter
3511825
asked Nov 20 '18 at 12:09
HamSterHamSter
3511825
asked Nov 20 '18 at 12:09
HamSterHamSter
3511825
asked Nov 20 '18 at 12:09
HamSterHamSter
3511825
3511825
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
4
How about this? It should work for any size by just changing the dimensions of <div class="box">.
.box {
position: relative;
margin: .75em auto 0;
width: 255px;
height: 56px;
}
.box svg {
position: absolute;
width: 100%;
height: 100%;
}
.size2 {
width: 455px;
height: 256px;
}<div class="box">
<svg width="100%" height="100%">
<mask id="m" fill="#fff">
<rect width="100%" height="100%"/>
<rect width="100%" height="100%" fill="none" stroke="#000" stroke-width="12"/>
<circle r="16" fill="#000"/>
<circle cx="100%" r="16" fill="#000"/>
<circle cy="100%" r="16" fill="#000"/>
<circle cx="100%" cy="100%" r="16" fill="#000"/>
<rect width="100%" height="100%" fill="none" stroke="#fff" stroke-width="8"/>
<circle r="14" fill="#fff"/>
<circle cx="100%" r="14" fill="#fff"/>
<circle cy="100%" r="14" fill="#fff"/>
<circle cx="100%" cy="100%" r="14" fill="#fff"/>
<circle r="10" fill="#000"/>
<circle cx="100%" r="10" fill="#000"/>
<circle cy="100%" r="10" fill="#000"/>
<circle cx="100%" cy="100%" r="10" fill="#000"/>
</mask>
<rect width="100%" height="100%" mask="url(#m)"/>
</svg>
</div>answered Nov 20 '18 at 13:44
Paul LeBeauPaul LeBeau
55.3k56593
is there a way to include a kind of variable to adjust all the same value at once?
– Temani Afif
Nov 20 '18 at 13:58
SVG2 lets you set therusing CSS. So you could use CSS variables andcalc(), as in Afif's answer.. But, so far, only Chrome supports that part of SVG2. Alternatively you could use Javascript to adjust all the radiuses and stroke widths.
– Paul LeBeau
Nov 20 '18 at 14:24
your answer help me more than others codepen.io/semenchenko/pen/BGJaVx, thank you!
– HamSter
Nov 20 '18 at 15:18
add a comment |
3
I would go with a pure CSS solution using multiple background. It's a bit trick to manipulate but using some CSS variable you can make it easy to adjust:
.box {
--th:2px; /*thickness of the transparent part*/
--l:4px; /*height of border*/
--r:25px; /*radius*/
--rad:transparent 50%,#000 50%,#000 64%,transparent 65%,transparent calc(66% + var(--th)),#000 calc(66% + var(--th));
--rad-s:var(--r) var(--r);
--border:#000 calc(var(--l)),transparent calc(var(--l)),transparent calc(var(--l) + var(--th));
--w:calc(100% - 2*var(--r) + 2*var(--th));
--h:calc(var(--l) + var(--th));
margin:10px;
display:inline-block;
padding:40px 20px;
background:
/*The 4 corners*/
linear-gradient(to bottom,var(--border)) center top/var(--w) var(--h),
linear-gradient(to top,var(--border)) center bottom/var(--w) var(--h),
linear-gradient(to right,var(--border)) center left/var(--h) var(--w),
linear-gradient(to left,var(--border)) center right/var(--h) var(--w),
/*The 4 borders */
radial-gradient(circle at top right,var(--rad)) top right/var(--rad-s),
radial-gradient(circle at top left,var(--rad)) top left/var(--rad-s),
radial-gradient(circle at bottom right,var(--rad)) bottom right/var(--rad-s),
radial-gradient(circle at bottom left,var(--rad)) bottom left/var(--rad-s),
/*The main background*/
linear-gradient(#000,#000) center/calc(100% - 2*var(--r)) calc(100% - 2*var(--h)),
linear-gradient(#000,#000) center/calc(100% - 2*var(--h)) calc(100% - 2*var(--r));
background-repeat:no-repeat;
color:#fff;
text-align:center;
}
body {
background:pink;
}<div class="box">
Some text inside
</div>
<div class="box" style="--th:3px;--r:20px">
Some text inside
</div>
<div class="box" style="--th:4px;--r:40px;--l:8px">
Some text inside
</div>
<div class="box" style="--th:5px;--r:30px">
Some text inside
</div>
<div class="box" style="--th:1px;--r:15px;--l:3px">
Some text inside
</div>answered Nov 20 '18 at 12:32
Temani AfifTemani Afif
68.8k93876
Your answer is good, but i see some bugs prntscr.com/lkoapv (
– HamSter
Nov 20 '18 at 12:49
@HamSter yes ... check again, I added few pixel to correct this
– Temani Afif
Nov 20 '18 at 12:59
codepen.io/semenchenko/pen/mQqZvp?editors=0100 =)) ... hmmmm ....
– HamSter
Nov 20 '18 at 13:05
1
@HamSter will try to edit to make it easier to adjust but yes SVG would be better if you find the good way
– Temani Afif
Nov 20 '18 at 13:58
1
@HamSter made some edits, still not perfect but easier to handle now
– Temani Afif
Nov 20 '18 at 14:36
|
show 3 more comments
2
This is my answer: I'm using the size of the bounding box of the text so you can change the text as you like.
For the cut out corners I'm using arcs.
Also you can change the "padding" i.e. the distance between the text and the border.
let bb = txt.getBBox();
function drawShape(path, padding){
let d = `M${bb.x},${bb.y - padding}
L${bb.x + bb.width},${bb.y - padding}
A${padding}, ${padding} 0 0 0 ${bb.x + bb.width + padding},${bb.y}
L${bb.x + bb.width + padding},${bb.y + bb.height}
A${padding}, ${padding} 0 0 0 ${bb.x + bb.width},${bb.y + bb.height + padding}
L${bb.x},${bb.y + bb.height + padding}
A${padding}, ${padding} 0 0 0 ${bb.x - padding},${bb.y + bb.height}
L${bb.x - padding},${bb.y}
A${padding}, ${padding} 0 0 0 ${bb.x},${bb.y - padding}z
`
path.setAttributeNS(null,"d",d)
}
drawShape(pth, 10);
drawShape(pth1, 10);<svg viewBox="0 0 200 100">
<path id="pth" fill="black" stroke="black" stroke-width="4" d="" />
<path id="pth1" stroke="white" stroke-width="2" d="" />
<text id="txt" fill="white" dominant-baseline="central" text-anchor="middle" x="100" y="50">
some text inside
</text>
</svg>answered Nov 20 '18 at 14:19
enxanetaenxaneta
7,0692516
If the inside border (white border) should be1pxor2px, what should I change?
– HamSter
Nov 20 '18 at 14:23
In the SVG you need to play with thestroke-widthfor the#pthand#pth1, keeping in mind that the black stroke (#pth) should be wider than the white stroke (#pth1).
– enxaneta
Nov 20 '18 at 14:32
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53392705%2fsvg-border-corners-with-inner-border%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
4
How about this? It should work for any size by just changing the dimensions of <div class="box">.
.box {
position: relative;
margin: .75em auto 0;
width: 255px;
height: 56px;
}
.box svg {
position: absolute;
width: 100%;
height: 100%;
}
.size2 {
width: 455px;
height: 256px;
}<div class="box">
<svg width="100%" height="100%">
<mask id="m" fill="#fff">
<rect width="100%" height="100%"/>
<rect width="100%" height="100%" fill="none" stroke="#000" stroke-width="12"/>
<circle r="16" fill="#000"/>
<circle cx="100%" r="16" fill="#000"/>
<circle cy="100%" r="16" fill="#000"/>
<circle cx="100%" cy="100%" r="16" fill="#000"/>
<rect width="100%" height="100%" fill="none" stroke="#fff" stroke-width="8"/>
<circle r="14" fill="#fff"/>
<circle cx="100%" r="14" fill="#fff"/>
<circle cy="100%" r="14" fill="#fff"/>
<circle cx="100%" cy="100%" r="14" fill="#fff"/>
<circle r="10" fill="#000"/>
<circle cx="100%" r="10" fill="#000"/>
<circle cy="100%" r="10" fill="#000"/>
<circle cx="100%" cy="100%" r="10" fill="#000"/>
</mask>
<rect width="100%" height="100%" mask="url(#m)"/>
</svg>
</div>answered Nov 20 '18 at 13:44
Paul LeBeauPaul LeBeau
55.3k56593
is there a way to include a kind of variable to adjust all the same value at once?
– Temani Afif
Nov 20 '18 at 13:58
SVG2 lets you set therusing CSS. So you could use CSS variables andcalc(), as in Afif's answer.. But, so far, only Chrome supports that part of SVG2. Alternatively you could use Javascript to adjust all the radiuses and stroke widths.
– Paul LeBeau
Nov 20 '18 at 14:24
your answer help me more than others codepen.io/semenchenko/pen/BGJaVx, thank you!
– HamSter
Nov 20 '18 at 15:18
add a comment |
4
How about this? It should work for any size by just changing the dimensions of <div class="box">.
.box {
position: relative;
margin: .75em auto 0;
width: 255px;
height: 56px;
}
.box svg {
position: absolute;
width: 100%;
height: 100%;
}
.size2 {
width: 455px;
height: 256px;
}<div class="box">
<svg width="100%" height="100%">
<mask id="m" fill="#fff">
<rect width="100%" height="100%"/>
<rect width="100%" height="100%" fill="none" stroke="#000" stroke-width="12"/>
<circle r="16" fill="#000"/>
<circle cx="100%" r="16" fill="#000"/>
<circle cy="100%" r="16" fill="#000"/>
<circle cx="100%" cy="100%" r="16" fill="#000"/>
<rect width="100%" height="100%" fill="none" stroke="#fff" stroke-width="8"/>
<circle r="14" fill="#fff"/>
<circle cx="100%" r="14" fill="#fff"/>
<circle cy="100%" r="14" fill="#fff"/>
<circle cx="100%" cy="100%" r="14" fill="#fff"/>
<circle r="10" fill="#000"/>
<circle cx="100%" r="10" fill="#000"/>
<circle cy="100%" r="10" fill="#000"/>
<circle cx="100%" cy="100%" r="10" fill="#000"/>
</mask>
<rect width="100%" height="100%" mask="url(#m)"/>
</svg>
</div>answered Nov 20 '18 at 13:44
Paul LeBeauPaul LeBeau
55.3k56593
is there a way to include a kind of variable to adjust all the same value at once?
– Temani Afif
Nov 20 '18 at 13:58
SVG2 lets you set therusing CSS. So you could use CSS variables andcalc(), as in Afif's answer.. But, so far, only Chrome supports that part of SVG2. Alternatively you could use Javascript to adjust all the radiuses and stroke widths.
– Paul LeBeau
Nov 20 '18 at 14:24
your answer help me more than others codepen.io/semenchenko/pen/BGJaVx, thank you!
– HamSter
Nov 20 '18 at 15:18
add a comment |
4
4
4
How about this? It should work for any size by just changing the dimensions of <div class="box">.
.box {
position: relative;
margin: .75em auto 0;
width: 255px;
height: 56px;
}
.box svg {
position: absolute;
width: 100%;
height: 100%;
}
.size2 {
width: 455px;
height: 256px;
}<div class="box">
<svg width="100%" height="100%">
<mask id="m" fill="#fff">
<rect width="100%" height="100%"/>
<rect width="100%" height="100%" fill="none" stroke="#000" stroke-width="12"/>
<circle r="16" fill="#000"/>
<circle cx="100%" r="16" fill="#000"/>
<circle cy="100%" r="16" fill="#000"/>
<circle cx="100%" cy="100%" r="16" fill="#000"/>
<rect width="100%" height="100%" fill="none" stroke="#fff" stroke-width="8"/>
<circle r="14" fill="#fff"/>
<circle cx="100%" r="14" fill="#fff"/>
<circle cy="100%" r="14" fill="#fff"/>
<circle cx="100%" cy="100%" r="14" fill="#fff"/>
<circle r="10" fill="#000"/>
<circle cx="100%" r="10" fill="#000"/>
<circle cy="100%" r="10" fill="#000"/>
<circle cx="100%" cy="100%" r="10" fill="#000"/>
</mask>
<rect width="100%" height="100%" mask="url(#m)"/>
</svg>
</div>answered Nov 20 '18 at 13:44
Paul LeBeauPaul LeBeau
55.3k56593
How about this? It should work for any size by just changing the dimensions of <div class="box">.
.box {
position: relative;
margin: .75em auto 0;
width: 255px;
height: 56px;
}
.box svg {
position: absolute;
width: 100%;
height: 100%;
}
.size2 {
width: 455px;
height: 256px;
}<div class="box">
<svg width="100%" height="100%">
<mask id="m" fill="#fff">
<rect width="100%" height="100%"/>
<rect width="100%" height="100%" fill="none" stroke="#000" stroke-width="12"/>
<circle r="16" fill="#000"/>
<circle cx="100%" r="16" fill="#000"/>
<circle cy="100%" r="16" fill="#000"/>
<circle cx="100%" cy="100%" r="16" fill="#000"/>
<rect width="100%" height="100%" fill="none" stroke="#fff" stroke-width="8"/>
<circle r="14" fill="#fff"/>
<circle cx="100%" r="14" fill="#fff"/>
<circle cy="100%" r="14" fill="#fff"/>
<circle cx="100%" cy="100%" r="14" fill="#fff"/>
<circle r="10" fill="#000"/>
<circle cx="100%" r="10" fill="#000"/>
<circle cy="100%" r="10" fill="#000"/>
<circle cx="100%" cy="100%" r="10" fill="#000"/>
</mask>
<rect width="100%" height="100%" mask="url(#m)"/>
</svg>
</div>.box {
position: relative;
margin: .75em auto 0;
width: 255px;
height: 56px;
}
.box svg {
position: absolute;
width: 100%;
height: 100%;
}
.size2 {
width: 455px;
height: 256px;
}<div class="box">
<svg width="100%" height="100%">
<mask id="m" fill="#fff">
<rect width="100%" height="100%"/>
<rect width="100%" height="100%" fill="none" stroke="#000" stroke-width="12"/>
<circle r="16" fill="#000"/>
<circle cx="100%" r="16" fill="#000"/>
<circle cy="100%" r="16" fill="#000"/>
<circle cx="100%" cy="100%" r="16" fill="#000"/>
<rect width="100%" height="100%" fill="none" stroke="#fff" stroke-width="8"/>
<circle r="14" fill="#fff"/>
<circle cx="100%" r="14" fill="#fff"/>
<circle cy="100%" r="14" fill="#fff"/>
<circle cx="100%" cy="100%" r="14" fill="#fff"/>
<circle r="10" fill="#000"/>
<circle cx="100%" r="10" fill="#000"/>
<circle cy="100%" r="10" fill="#000"/>
<circle cx="100%" cy="100%" r="10" fill="#000"/>
</mask>
<rect width="100%" height="100%" mask="url(#m)"/>
</svg>
</div>.box {
position: relative;
margin: .75em auto 0;
width: 255px;
height: 56px;
}
.box svg {
position: absolute;
width: 100%;
height: 100%;
}
.size2 {
width: 455px;
height: 256px;
}<div class="box">
<svg width="100%" height="100%">
<mask id="m" fill="#fff">
<rect width="100%" height="100%"/>
<rect width="100%" height="100%" fill="none" stroke="#000" stroke-width="12"/>
<circle r="16" fill="#000"/>
<circle cx="100%" r="16" fill="#000"/>
<circle cy="100%" r="16" fill="#000"/>
<circle cx="100%" cy="100%" r="16" fill="#000"/>
<rect width="100%" height="100%" fill="none" stroke="#fff" stroke-width="8"/>
<circle r="14" fill="#fff"/>
<circle cx="100%" r="14" fill="#fff"/>
<circle cy="100%" r="14" fill="#fff"/>
<circle cx="100%" cy="100%" r="14" fill="#fff"/>
<circle r="10" fill="#000"/>
<circle cx="100%" r="10" fill="#000"/>
<circle cy="100%" r="10" fill="#000"/>
<circle cx="100%" cy="100%" r="10" fill="#000"/>
</mask>
<rect width="100%" height="100%" mask="url(#m)"/>
</svg>
</div>answered Nov 20 '18 at 13:44
Paul LeBeauPaul LeBeau
55.3k56593
answered Nov 20 '18 at 13:44
Paul LeBeauPaul LeBeau
55.3k56593
answered Nov 20 '18 at 13:44
Paul LeBeauPaul LeBeau
55.3k56593
answered Nov 20 '18 at 13:44
Paul LeBeauPaul LeBeau
55.3k56593
55.3k56593
is there a way to include a kind of variable to adjust all the same value at once?
– Temani Afif
Nov 20 '18 at 13:58
SVG2 lets you set therusing CSS. So you could use CSS variables andcalc(), as in Afif's answer.. But, so far, only Chrome supports that part of SVG2. Alternatively you could use Javascript to adjust all the radiuses and stroke widths.
– Paul LeBeau
Nov 20 '18 at 14:24
your answer help me more than others codepen.io/semenchenko/pen/BGJaVx, thank you!
– HamSter
Nov 20 '18 at 15:18
add a comment |
is there a way to include a kind of variable to adjust all the same value at once?
– Temani Afif
Nov 20 '18 at 13:58
SVG2 lets you set therusing CSS. So you could use CSS variables andcalc(), as in Afif's answer.. But, so far, only Chrome supports that part of SVG2. Alternatively you could use Javascript to adjust all the radiuses and stroke widths.
– Paul LeBeau
Nov 20 '18 at 14:24
your answer help me more than others codepen.io/semenchenko/pen/BGJaVx, thank you!
– HamSter
Nov 20 '18 at 15:18
is there a way to include a kind of variable to adjust all the same value at once?
– Temani Afif
Nov 20 '18 at 13:58
is there a way to include a kind of variable to adjust all the same value at once?
– Temani Afif
Nov 20 '18 at 13:58
SVG2 lets you set the
r using CSS. So you could use CSS variables and calc() , as in Afif's answer.. But, so far, only Chrome supports that part of SVG2. Alternatively you could use Javascript to adjust all the radiuses and stroke widths.– Paul LeBeau
Nov 20 '18 at 14:24
SVG2 lets you set the
r using CSS. So you could use CSS variables and calc() , as in Afif's answer.. But, so far, only Chrome supports that part of SVG2. Alternatively you could use Javascript to adjust all the radiuses and stroke widths.– Paul LeBeau
Nov 20 '18 at 14:24
your answer help me more than others codepen.io/semenchenko/pen/BGJaVx, thank you!
– HamSter
Nov 20 '18 at 15:18
your answer help me more than others codepen.io/semenchenko/pen/BGJaVx, thank you!
– HamSter
Nov 20 '18 at 15:18
add a comment |
3
I would go with a pure CSS solution using multiple background. It's a bit trick to manipulate but using some CSS variable you can make it easy to adjust:
.box {
--th:2px; /*thickness of the transparent part*/
--l:4px; /*height of border*/
--r:25px; /*radius*/
--rad:transparent 50%,#000 50%,#000 64%,transparent 65%,transparent calc(66% + var(--th)),#000 calc(66% + var(--th));
--rad-s:var(--r) var(--r);
--border:#000 calc(var(--l)),transparent calc(var(--l)),transparent calc(var(--l) + var(--th));
--w:calc(100% - 2*var(--r) + 2*var(--th));
--h:calc(var(--l) + var(--th));
margin:10px;
display:inline-block;
padding:40px 20px;
background:
/*The 4 corners*/
linear-gradient(to bottom,var(--border)) center top/var(--w) var(--h),
linear-gradient(to top,var(--border)) center bottom/var(--w) var(--h),
linear-gradient(to right,var(--border)) center left/var(--h) var(--w),
linear-gradient(to left,var(--border)) center right/var(--h) var(--w),
/*The 4 borders */
radial-gradient(circle at top right,var(--rad)) top right/var(--rad-s),
radial-gradient(circle at top left,var(--rad)) top left/var(--rad-s),
radial-gradient(circle at bottom right,var(--rad)) bottom right/var(--rad-s),
radial-gradient(circle at bottom left,var(--rad)) bottom left/var(--rad-s),
/*The main background*/
linear-gradient(#000,#000) center/calc(100% - 2*var(--r)) calc(100% - 2*var(--h)),
linear-gradient(#000,#000) center/calc(100% - 2*var(--h)) calc(100% - 2*var(--r));
background-repeat:no-repeat;
color:#fff;
text-align:center;
}
body {
background:pink;
}<div class="box">
Some text inside
</div>
<div class="box" style="--th:3px;--r:20px">
Some text inside
</div>
<div class="box" style="--th:4px;--r:40px;--l:8px">
Some text inside
</div>
<div class="box" style="--th:5px;--r:30px">
Some text inside
</div>
<div class="box" style="--th:1px;--r:15px;--l:3px">
Some text inside
</div>answered Nov 20 '18 at 12:32
Temani AfifTemani Afif
68.8k93876
Your answer is good, but i see some bugs prntscr.com/lkoapv (
– HamSter
Nov 20 '18 at 12:49
@HamSter yes ... check again, I added few pixel to correct this
– Temani Afif
Nov 20 '18 at 12:59
codepen.io/semenchenko/pen/mQqZvp?editors=0100 =)) ... hmmmm ....
– HamSter
Nov 20 '18 at 13:05
1
@HamSter will try to edit to make it easier to adjust but yes SVG would be better if you find the good way
– Temani Afif
Nov 20 '18 at 13:58
1
@HamSter made some edits, still not perfect but easier to handle now
– Temani Afif
Nov 20 '18 at 14:36
|
show 3 more comments
3
I would go with a pure CSS solution using multiple background. It's a bit trick to manipulate but using some CSS variable you can make it easy to adjust:
.box {
--th:2px; /*thickness of the transparent part*/
--l:4px; /*height of border*/
--r:25px; /*radius*/
--rad:transparent 50%,#000 50%,#000 64%,transparent 65%,transparent calc(66% + var(--th)),#000 calc(66% + var(--th));
--rad-s:var(--r) var(--r);
--border:#000 calc(var(--l)),transparent calc(var(--l)),transparent calc(var(--l) + var(--th));
--w:calc(100% - 2*var(--r) + 2*var(--th));
--h:calc(var(--l) + var(--th));
margin:10px;
display:inline-block;
padding:40px 20px;
background:
/*The 4 corners*/
linear-gradient(to bottom,var(--border)) center top/var(--w) var(--h),
linear-gradient(to top,var(--border)) center bottom/var(--w) var(--h),
linear-gradient(to right,var(--border)) center left/var(--h) var(--w),
linear-gradient(to left,var(--border)) center right/var(--h) var(--w),
/*The 4 borders */
radial-gradient(circle at top right,var(--rad)) top right/var(--rad-s),
radial-gradient(circle at top left,var(--rad)) top left/var(--rad-s),
radial-gradient(circle at bottom right,var(--rad)) bottom right/var(--rad-s),
radial-gradient(circle at bottom left,var(--rad)) bottom left/var(--rad-s),
/*The main background*/
linear-gradient(#000,#000) center/calc(100% - 2*var(--r)) calc(100% - 2*var(--h)),
linear-gradient(#000,#000) center/calc(100% - 2*var(--h)) calc(100% - 2*var(--r));
background-repeat:no-repeat;
color:#fff;
text-align:center;
}
body {
background:pink;
}<div class="box">
Some text inside
</div>
<div class="box" style="--th:3px;--r:20px">
Some text inside
</div>
<div class="box" style="--th:4px;--r:40px;--l:8px">
Some text inside
</div>
<div class="box" style="--th:5px;--r:30px">
Some text inside
</div>
<div class="box" style="--th:1px;--r:15px;--l:3px">
Some text inside
</div>answered Nov 20 '18 at 12:32
Temani AfifTemani Afif
68.8k93876
Your answer is good, but i see some bugs prntscr.com/lkoapv (
– HamSter
Nov 20 '18 at 12:49
@HamSter yes ... check again, I added few pixel to correct this
– Temani Afif
Nov 20 '18 at 12:59
codepen.io/semenchenko/pen/mQqZvp?editors=0100 =)) ... hmmmm ....
– HamSter
Nov 20 '18 at 13:05
1
@HamSter will try to edit to make it easier to adjust but yes SVG would be better if you find the good way
– Temani Afif
Nov 20 '18 at 13:58
1
@HamSter made some edits, still not perfect but easier to handle now
– Temani Afif
Nov 20 '18 at 14:36
|
show 3 more comments
3
3
3
I would go with a pure CSS solution using multiple background. It's a bit trick to manipulate but using some CSS variable you can make it easy to adjust:
.box {
--th:2px; /*thickness of the transparent part*/
--l:4px; /*height of border*/
--r:25px; /*radius*/
--rad:transparent 50%,#000 50%,#000 64%,transparent 65%,transparent calc(66% + var(--th)),#000 calc(66% + var(--th));
--rad-s:var(--r) var(--r);
--border:#000 calc(var(--l)),transparent calc(var(--l)),transparent calc(var(--l) + var(--th));
--w:calc(100% - 2*var(--r) + 2*var(--th));
--h:calc(var(--l) + var(--th));
margin:10px;
display:inline-block;
padding:40px 20px;
background:
/*The 4 corners*/
linear-gradient(to bottom,var(--border)) center top/var(--w) var(--h),
linear-gradient(to top,var(--border)) center bottom/var(--w) var(--h),
linear-gradient(to right,var(--border)) center left/var(--h) var(--w),
linear-gradient(to left,var(--border)) center right/var(--h) var(--w),
/*The 4 borders */
radial-gradient(circle at top right,var(--rad)) top right/var(--rad-s),
radial-gradient(circle at top left,var(--rad)) top left/var(--rad-s),
radial-gradient(circle at bottom right,var(--rad)) bottom right/var(--rad-s),
radial-gradient(circle at bottom left,var(--rad)) bottom left/var(--rad-s),
/*The main background*/
linear-gradient(#000,#000) center/calc(100% - 2*var(--r)) calc(100% - 2*var(--h)),
linear-gradient(#000,#000) center/calc(100% - 2*var(--h)) calc(100% - 2*var(--r));
background-repeat:no-repeat;
color:#fff;
text-align:center;
}
body {
background:pink;
}<div class="box">
Some text inside
</div>
<div class="box" style="--th:3px;--r:20px">
Some text inside
</div>
<div class="box" style="--th:4px;--r:40px;--l:8px">
Some text inside
</div>
<div class="box" style="--th:5px;--r:30px">
Some text inside
</div>
<div class="box" style="--th:1px;--r:15px;--l:3px">
Some text inside
</div>answered Nov 20 '18 at 12:32
Temani AfifTemani Afif
68.8k93876
I would go with a pure CSS solution using multiple background. It's a bit trick to manipulate but using some CSS variable you can make it easy to adjust:
.box {
--th:2px; /*thickness of the transparent part*/
--l:4px; /*height of border*/
--r:25px; /*radius*/
--rad:transparent 50%,#000 50%,#000 64%,transparent 65%,transparent calc(66% + var(--th)),#000 calc(66% + var(--th));
--rad-s:var(--r) var(--r);
--border:#000 calc(var(--l)),transparent calc(var(--l)),transparent calc(var(--l) + var(--th));
--w:calc(100% - 2*var(--r) + 2*var(--th));
--h:calc(var(--l) + var(--th));
margin:10px;
display:inline-block;
padding:40px 20px;
background:
/*The 4 corners*/
linear-gradient(to bottom,var(--border)) center top/var(--w) var(--h),
linear-gradient(to top,var(--border)) center bottom/var(--w) var(--h),
linear-gradient(to right,var(--border)) center left/var(--h) var(--w),
linear-gradient(to left,var(--border)) center right/var(--h) var(--w),
/*The 4 borders */
radial-gradient(circle at top right,var(--rad)) top right/var(--rad-s),
radial-gradient(circle at top left,var(--rad)) top left/var(--rad-s),
radial-gradient(circle at bottom right,var(--rad)) bottom right/var(--rad-s),
radial-gradient(circle at bottom left,var(--rad)) bottom left/var(--rad-s),
/*The main background*/
linear-gradient(#000,#000) center/calc(100% - 2*var(--r)) calc(100% - 2*var(--h)),
linear-gradient(#000,#000) center/calc(100% - 2*var(--h)) calc(100% - 2*var(--r));
background-repeat:no-repeat;
color:#fff;
text-align:center;
}
body {
background:pink;
}<div class="box">
Some text inside
</div>
<div class="box" style="--th:3px;--r:20px">
Some text inside
</div>
<div class="box" style="--th:4px;--r:40px;--l:8px">
Some text inside
</div>
<div class="box" style="--th:5px;--r:30px">
Some text inside
</div>
<div class="box" style="--th:1px;--r:15px;--l:3px">
Some text inside
</div>.box {
--th:2px; /*thickness of the transparent part*/
--l:4px; /*height of border*/
--r:25px; /*radius*/
--rad:transparent 50%,#000 50%,#000 64%,transparent 65%,transparent calc(66% + var(--th)),#000 calc(66% + var(--th));
--rad-s:var(--r) var(--r);
--border:#000 calc(var(--l)),transparent calc(var(--l)),transparent calc(var(--l) + var(--th));
--w:calc(100% - 2*var(--r) + 2*var(--th));
--h:calc(var(--l) + var(--th));
margin:10px;
display:inline-block;
padding:40px 20px;
background:
/*The 4 corners*/
linear-gradient(to bottom,var(--border)) center top/var(--w) var(--h),
linear-gradient(to top,var(--border)) center bottom/var(--w) var(--h),
linear-gradient(to right,var(--border)) center left/var(--h) var(--w),
linear-gradient(to left,var(--border)) center right/var(--h) var(--w),
/*The 4 borders */
radial-gradient(circle at top right,var(--rad)) top right/var(--rad-s),
radial-gradient(circle at top left,var(--rad)) top left/var(--rad-s),
radial-gradient(circle at bottom right,var(--rad)) bottom right/var(--rad-s),
radial-gradient(circle at bottom left,var(--rad)) bottom left/var(--rad-s),
/*The main background*/
linear-gradient(#000,#000) center/calc(100% - 2*var(--r)) calc(100% - 2*var(--h)),
linear-gradient(#000,#000) center/calc(100% - 2*var(--h)) calc(100% - 2*var(--r));
background-repeat:no-repeat;
color:#fff;
text-align:center;
}
body {
background:pink;
}<div class="box">
Some text inside
</div>
<div class="box" style="--th:3px;--r:20px">
Some text inside
</div>
<div class="box" style="--th:4px;--r:40px;--l:8px">
Some text inside
</div>
<div class="box" style="--th:5px;--r:30px">
Some text inside
</div>
<div class="box" style="--th:1px;--r:15px;--l:3px">
Some text inside
</div>.box {
--th:2px; /*thickness of the transparent part*/
--l:4px; /*height of border*/
--r:25px; /*radius*/
--rad:transparent 50%,#000 50%,#000 64%,transparent 65%,transparent calc(66% + var(--th)),#000 calc(66% + var(--th));
--rad-s:var(--r) var(--r);
--border:#000 calc(var(--l)),transparent calc(var(--l)),transparent calc(var(--l) + var(--th));
--w:calc(100% - 2*var(--r) + 2*var(--th));
--h:calc(var(--l) + var(--th));
margin:10px;
display:inline-block;
padding:40px 20px;
background:
/*The 4 corners*/
linear-gradient(to bottom,var(--border)) center top/var(--w) var(--h),
linear-gradient(to top,var(--border)) center bottom/var(--w) var(--h),
linear-gradient(to right,var(--border)) center left/var(--h) var(--w),
linear-gradient(to left,var(--border)) center right/var(--h) var(--w),
/*The 4 borders */
radial-gradient(circle at top right,var(--rad)) top right/var(--rad-s),
radial-gradient(circle at top left,var(--rad)) top left/var(--rad-s),
radial-gradient(circle at bottom right,var(--rad)) bottom right/var(--rad-s),
radial-gradient(circle at bottom left,var(--rad)) bottom left/var(--rad-s),
/*The main background*/
linear-gradient(#000,#000) center/calc(100% - 2*var(--r)) calc(100% - 2*var(--h)),
linear-gradient(#000,#000) center/calc(100% - 2*var(--h)) calc(100% - 2*var(--r));
background-repeat:no-repeat;
color:#fff;
text-align:center;
}
body {
background:pink;
}<div class="box">
Some text inside
</div>
<div class="box" style="--th:3px;--r:20px">
Some text inside
</div>
<div class="box" style="--th:4px;--r:40px;--l:8px">
Some text inside
</div>
<div class="box" style="--th:5px;--r:30px">
Some text inside
</div>
<div class="box" style="--th:1px;--r:15px;--l:3px">
Some text inside
</div>answered Nov 20 '18 at 12:32
Temani AfifTemani Afif
68.8k93876
edited Nov 20 '18 at 14:38
answered Nov 20 '18 at 12:32
Temani AfifTemani Afif
68.8k93876
answered Nov 20 '18 at 12:32
Temani AfifTemani Afif
68.8k93876
answered Nov 20 '18 at 12:32
Temani AfifTemani Afif
68.8k93876
68.8k93876
Your answer is good, but i see some bugs prntscr.com/lkoapv (
– HamSter
Nov 20 '18 at 12:49
@HamSter yes ... check again, I added few pixel to correct this
– Temani Afif
Nov 20 '18 at 12:59
codepen.io/semenchenko/pen/mQqZvp?editors=0100 =)) ... hmmmm ....
– HamSter
Nov 20 '18 at 13:05
1
@HamSter will try to edit to make it easier to adjust but yes SVG would be better if you find the good way
– Temani Afif
Nov 20 '18 at 13:58
1
@HamSter made some edits, still not perfect but easier to handle now
– Temani Afif
Nov 20 '18 at 14:36
|
show 3 more comments
Your answer is good, but i see some bugs prntscr.com/lkoapv (
– HamSter
Nov 20 '18 at 12:49
@HamSter yes ... check again, I added few pixel to correct this
– Temani Afif
Nov 20 '18 at 12:59
codepen.io/semenchenko/pen/mQqZvp?editors=0100 =)) ... hmmmm ....
– HamSter
Nov 20 '18 at 13:05
1
@HamSter will try to edit to make it easier to adjust but yes SVG would be better if you find the good way
– Temani Afif
Nov 20 '18 at 13:58
1
@HamSter made some edits, still not perfect but easier to handle now
– Temani Afif
Nov 20 '18 at 14:36
Your answer is good, but i see some bugs prntscr.com/lkoapv (
– HamSter
Nov 20 '18 at 12:49
Your answer is good, but i see some bugs prntscr.com/lkoapv (
– HamSter
Nov 20 '18 at 12:49
@HamSter yes ... check again, I added few pixel to correct this
– Temani Afif
Nov 20 '18 at 12:59
@HamSter yes ... check again, I added few pixel to correct this
– Temani Afif
Nov 20 '18 at 12:59
codepen.io/semenchenko/pen/mQqZvp?editors=0100 =)) ... hmmmm ....
– HamSter
Nov 20 '18 at 13:05
codepen.io/semenchenko/pen/mQqZvp?editors=0100 =)) ... hmmmm ....
– HamSter
Nov 20 '18 at 13:05
1
1
@HamSter will try to edit to make it easier to adjust but yes SVG would be better if you find the good way
– Temani Afif
Nov 20 '18 at 13:58
@HamSter will try to edit to make it easier to adjust but yes SVG would be better if you find the good way
– Temani Afif
Nov 20 '18 at 13:58
1
1
@HamSter made some edits, still not perfect but easier to handle now
– Temani Afif
Nov 20 '18 at 14:36
@HamSter made some edits, still not perfect but easier to handle now
– Temani Afif
Nov 20 '18 at 14:36
|
show 3 more comments
2
This is my answer: I'm using the size of the bounding box of the text so you can change the text as you like.
For the cut out corners I'm using arcs.
Also you can change the "padding" i.e. the distance between the text and the border.
let bb = txt.getBBox();
function drawShape(path, padding){
let d = `M${bb.x},${bb.y - padding}
L${bb.x + bb.width},${bb.y - padding}
A${padding}, ${padding} 0 0 0 ${bb.x + bb.width + padding},${bb.y}
L${bb.x + bb.width + padding},${bb.y + bb.height}
A${padding}, ${padding} 0 0 0 ${bb.x + bb.width},${bb.y + bb.height + padding}
L${bb.x},${bb.y + bb.height + padding}
A${padding}, ${padding} 0 0 0 ${bb.x - padding},${bb.y + bb.height}
L${bb.x - padding},${bb.y}
A${padding}, ${padding} 0 0 0 ${bb.x},${bb.y - padding}z
`
path.setAttributeNS(null,"d",d)
}
drawShape(pth, 10);
drawShape(pth1, 10);<svg viewBox="0 0 200 100">
<path id="pth" fill="black" stroke="black" stroke-width="4" d="" />
<path id="pth1" stroke="white" stroke-width="2" d="" />
<text id="txt" fill="white" dominant-baseline="central" text-anchor="middle" x="100" y="50">
some text inside
</text>
</svg>answered Nov 20 '18 at 14:19
enxanetaenxaneta
7,0692516
If the inside border (white border) should be1pxor2px, what should I change?
– HamSter
Nov 20 '18 at 14:23
In the SVG you need to play with thestroke-widthfor the#pthand#pth1, keeping in mind that the black stroke (#pth) should be wider than the white stroke (#pth1).
– enxaneta
Nov 20 '18 at 14:32
add a comment |
2
This is my answer: I'm using the size of the bounding box of the text so you can change the text as you like.
For the cut out corners I'm using arcs.
Also you can change the "padding" i.e. the distance between the text and the border.
let bb = txt.getBBox();
function drawShape(path, padding){
let d = `M${bb.x},${bb.y - padding}
L${bb.x + bb.width},${bb.y - padding}
A${padding}, ${padding} 0 0 0 ${bb.x + bb.width + padding},${bb.y}
L${bb.x + bb.width + padding},${bb.y + bb.height}
A${padding}, ${padding} 0 0 0 ${bb.x + bb.width},${bb.y + bb.height + padding}
L${bb.x},${bb.y + bb.height + padding}
A${padding}, ${padding} 0 0 0 ${bb.x - padding},${bb.y + bb.height}
L${bb.x - padding},${bb.y}
A${padding}, ${padding} 0 0 0 ${bb.x},${bb.y - padding}z
`
path.setAttributeNS(null,"d",d)
}
drawShape(pth, 10);
drawShape(pth1, 10);<svg viewBox="0 0 200 100">
<path id="pth" fill="black" stroke="black" stroke-width="4" d="" />
<path id="pth1" stroke="white" stroke-width="2" d="" />
<text id="txt" fill="white" dominant-baseline="central" text-anchor="middle" x="100" y="50">
some text inside
</text>
</svg>answered Nov 20 '18 at 14:19
enxanetaenxaneta
7,0692516
If the inside border (white border) should be1pxor2px, what should I change?
– HamSter
Nov 20 '18 at 14:23
In the SVG you need to play with thestroke-widthfor the#pthand#pth1, keeping in mind that the black stroke (#pth) should be wider than the white stroke (#pth1).
– enxaneta
Nov 20 '18 at 14:32
add a comment |
2
2
2
This is my answer: I'm using the size of the bounding box of the text so you can change the text as you like.
For the cut out corners I'm using arcs.
Also you can change the "padding" i.e. the distance between the text and the border.
let bb = txt.getBBox();
function drawShape(path, padding){
let d = `M${bb.x},${bb.y - padding}
L${bb.x + bb.width},${bb.y - padding}
A${padding}, ${padding} 0 0 0 ${bb.x + bb.width + padding},${bb.y}
L${bb.x + bb.width + padding},${bb.y + bb.height}
A${padding}, ${padding} 0 0 0 ${bb.x + bb.width},${bb.y + bb.height + padding}
L${bb.x},${bb.y + bb.height + padding}
A${padding}, ${padding} 0 0 0 ${bb.x - padding},${bb.y + bb.height}
L${bb.x - padding},${bb.y}
A${padding}, ${padding} 0 0 0 ${bb.x},${bb.y - padding}z
`
path.setAttributeNS(null,"d",d)
}
drawShape(pth, 10);
drawShape(pth1, 10);<svg viewBox="0 0 200 100">
<path id="pth" fill="black" stroke="black" stroke-width="4" d="" />
<path id="pth1" stroke="white" stroke-width="2" d="" />
<text id="txt" fill="white" dominant-baseline="central" text-anchor="middle" x="100" y="50">
some text inside
</text>
</svg>answered Nov 20 '18 at 14:19
enxanetaenxaneta
7,0692516
This is my answer: I'm using the size of the bounding box of the text so you can change the text as you like.
For the cut out corners I'm using arcs.
Also you can change the "padding" i.e. the distance between the text and the border.
let bb = txt.getBBox();
function drawShape(path, padding){
let d = `M${bb.x},${bb.y - padding}
L${bb.x + bb.width},${bb.y - padding}
A${padding}, ${padding} 0 0 0 ${bb.x + bb.width + padding},${bb.y}
L${bb.x + bb.width + padding},${bb.y + bb.height}
A${padding}, ${padding} 0 0 0 ${bb.x + bb.width},${bb.y + bb.height + padding}
L${bb.x},${bb.y + bb.height + padding}
A${padding}, ${padding} 0 0 0 ${bb.x - padding},${bb.y + bb.height}
L${bb.x - padding},${bb.y}
A${padding}, ${padding} 0 0 0 ${bb.x},${bb.y - padding}z
`
path.setAttributeNS(null,"d",d)
}
drawShape(pth, 10);
drawShape(pth1, 10);<svg viewBox="0 0 200 100">
<path id="pth" fill="black" stroke="black" stroke-width="4" d="" />
<path id="pth1" stroke="white" stroke-width="2" d="" />
<text id="txt" fill="white" dominant-baseline="central" text-anchor="middle" x="100" y="50">
some text inside
</text>
</svg>let bb = txt.getBBox();
function drawShape(path, padding){
let d = `M${bb.x},${bb.y - padding}
L${bb.x + bb.width},${bb.y - padding}
A${padding}, ${padding} 0 0 0 ${bb.x + bb.width + padding},${bb.y}
L${bb.x + bb.width + padding},${bb.y + bb.height}
A${padding}, ${padding} 0 0 0 ${bb.x + bb.width},${bb.y + bb.height + padding}
L${bb.x},${bb.y + bb.height + padding}
A${padding}, ${padding} 0 0 0 ${bb.x - padding},${bb.y + bb.height}
L${bb.x - padding},${bb.y}
A${padding}, ${padding} 0 0 0 ${bb.x},${bb.y - padding}z
`
path.setAttributeNS(null,"d",d)
}
drawShape(pth, 10);
drawShape(pth1, 10);<svg viewBox="0 0 200 100">
<path id="pth" fill="black" stroke="black" stroke-width="4" d="" />
<path id="pth1" stroke="white" stroke-width="2" d="" />
<text id="txt" fill="white" dominant-baseline="central" text-anchor="middle" x="100" y="50">
some text inside
</text>
</svg>let bb = txt.getBBox();
function drawShape(path, padding){
let d = `M${bb.x},${bb.y - padding}
L${bb.x + bb.width},${bb.y - padding}
A${padding}, ${padding} 0 0 0 ${bb.x + bb.width + padding},${bb.y}
L${bb.x + bb.width + padding},${bb.y + bb.height}
A${padding}, ${padding} 0 0 0 ${bb.x + bb.width},${bb.y + bb.height + padding}
L${bb.x},${bb.y + bb.height + padding}
A${padding}, ${padding} 0 0 0 ${bb.x - padding},${bb.y + bb.height}
L${bb.x - padding},${bb.y}
A${padding}, ${padding} 0 0 0 ${bb.x},${bb.y - padding}z
`
path.setAttributeNS(null,"d",d)
}
drawShape(pth, 10);
drawShape(pth1, 10);<svg viewBox="0 0 200 100">
<path id="pth" fill="black" stroke="black" stroke-width="4" d="" />
<path id="pth1" stroke="white" stroke-width="2" d="" />
<text id="txt" fill="white" dominant-baseline="central" text-anchor="middle" x="100" y="50">
some text inside
</text>
</svg>answered Nov 20 '18 at 14:19
enxanetaenxaneta
7,0692516
edited Nov 20 '18 at 14:42
answered Nov 20 '18 at 14:19
enxanetaenxaneta
7,0692516
answered Nov 20 '18 at 14:19
enxanetaenxaneta
7,0692516
answered Nov 20 '18 at 14:19
enxanetaenxaneta
7,0692516
7,0692516
If the inside border (white border) should be1pxor2px, what should I change?
– HamSter
Nov 20 '18 at 14:23
In the SVG you need to play with thestroke-widthfor the#pthand#pth1, keeping in mind that the black stroke (#pth) should be wider than the white stroke (#pth1).
– enxaneta
Nov 20 '18 at 14:32
add a comment |
If the inside border (white border) should be1pxor2px, what should I change?
– HamSter
Nov 20 '18 at 14:23
In the SVG you need to play with thestroke-widthfor the#pthand#pth1, keeping in mind that the black stroke (#pth) should be wider than the white stroke (#pth1).
– enxaneta
Nov 20 '18 at 14:32
If the inside border (white border) should be
1px or 2px, what should I change?– HamSter
Nov 20 '18 at 14:23
If the inside border (white border) should be
1px or 2px, what should I change?– HamSter
Nov 20 '18 at 14:23
In the SVG you need to play with the
stroke-width for the #pth and #pth1, keeping in mind that the black stroke (#pth) should be wider than the white stroke (#pth1).– enxaneta
Nov 20 '18 at 14:32
In the SVG you need to play with the
stroke-width for the #pth and #pth1, keeping in mind that the black stroke (#pth) should be wider than the white stroke (#pth1).– enxaneta
Nov 20 '18 at 14:32
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53392705%2fsvg-border-corners-with-inner-border%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
