如何在 html 页面的直角三角形内画一个圆?
How to draw a circle inside a right angled triangle in html page?
是否可以使用 CSS 在 HTML 页面的直角三角形内画一个圆圈。
是否也可以在里面放一些文字?
输出应该类似于
这是一个希望能帮助您入门的最小示例:https://jsfiddle.net/8mfx9qhj
我总是在 https://css-tricks.com/the-shapes-of-css/ when trying to do things like this with CSS. If you're looking to draw a more complex diagram like the image above, I'd recommend doing it with SVG and some drawing library (e.g. http://snapsvg.io/) 结束,这将使工作变得容易得多。
来自链接 jsfiddle 的代码:
<div id="triangle">
<div id="circle">
hello world
</div>
</div>
#triangle {
position: relative;
width: 0;
height: 0;
border-bottom: 100px solid blue;
border-right: 150px solid transparent;
}
#circle {
position: absolute;
top: 30px;
width: 38px;
height: 38px;
padding: 16px;
border-radius: 50%;
background: red;
color: white;
}
输出:
如您所见,需要大量 css 和嵌套 html 来创建形状。正如@evnp所说
SVG 会让你的生活更轻松。
#right-triangle-red {
width: 0;
height: 0;
border-bottom: 300px solid red;
border-right: 500px solid transparent;
position: relative;
}
#right-trianlg-white {
width: 0;
height: 0;
border-bottom: 276px solid white;
border-right: 461px solid transparent;
position: relative;
z-index: 10;
top: 16px;
left: 10px;
}
.triangles {
position: relative;
}
#circle-purple {
width: 200px;
height: 200px;
background: purple;
border-radius: 50%;
position: relative;
}
#circle-white {
width: 190px;
height: 190px;
background: white;
border-radius: 50%;
position: relative;
z-index: 20;
top: 5px;
left: 5px;
}
#circle-green {
width: 15px;
height: 15px;
background: green;
border-radius: 50%;
position: absolute;
z-index: 40;
top: 86px;
left: 86px;
}
.circles {
position: relative;
z-index: 20;
top: -207px;
left: 10px;
}
.label {
font-size: 30px;
color: red;
z-index: 30;
position: relative;
}
.label-b {
top: -219px;
left: 510px;
}
.label-c {
top: -205px;
left: -31px;
}
.label-d {
color: green;
top: -341px;
left: 64px;
}
.shape-container {
position: relative;
}
<span class="label label-a">
A
</span>
<div class="shape-container">
<div class="triangles">
<div id="right-triangle-red">
<div id="right-trianlg-white">
</div>
</div>
</div>
<div class="circles">
<div id="circle-purple">
<div id="circle-white">
<div id="circle-green">
</div>
</div>
</div>
</div>
</div>
<span class="label label-b">
B
</span>
<span class="label label-c">
C
</span>
<span class="label label-d">
D
</span>
我会考虑this previous answer画三角形,然后再给圆加上渐变
.triangle {
--t:10; /* Thickness */
--c:black; /* Color */
--r:25px; /* Radius*/
width:100px;
height:100px;
display:inline-block;
border:calc(var(--t)*1px) solid transparent;
border-image:
linear-gradient(to bottom left,
transparent 49.5%,var(--c) 50%) var(--t);
background:
/* Left side */
linear-gradient(to bottom left,
transparent 49.5%,var(--c) 50% calc(50% + var(--t)*1px),
transparent calc(50% + var(--t)*1px + 1px)),
/* circle */
radial-gradient(circle var(--r) at var(--r) calc(100% - var(--r)),
transparent calc(100% - 5px), yellow calc(100% - 4px) 99%,transparent 100%);
background-origin:border-box,padding-box;
background-repeat:no-repeat;
}
body {
background:pink;
}
<div class="triangle"></div>
<div class="triangle" style="--t:5;--c:blue;width:150px;--r:33px;"></div>
<div class="triangle" style="--t:8;--c:red;height:150px;--r:31px;"></div>
<div class="triangle" style="--t:15;--c:green;width:80px;--r:20px"></div>
你只需要一些数学来计算半径。相关:https://math.stackexchange.com/q/2247599/695610
如您所见,它的末尾是一个简单的 div,因此您可以在其中写入内容并按需要对齐
是否可以使用 CSS 在 HTML 页面的直角三角形内画一个圆圈。 是否也可以在里面放一些文字?
输出应该类似于
这是一个希望能帮助您入门的最小示例:https://jsfiddle.net/8mfx9qhj
我总是在 https://css-tricks.com/the-shapes-of-css/ when trying to do things like this with CSS. If you're looking to draw a more complex diagram like the image above, I'd recommend doing it with SVG and some drawing library (e.g. http://snapsvg.io/) 结束,这将使工作变得容易得多。
来自链接 jsfiddle 的代码:
<div id="triangle">
<div id="circle">
hello world
</div>
</div>
#triangle {
position: relative;
width: 0;
height: 0;
border-bottom: 100px solid blue;
border-right: 150px solid transparent;
}
#circle {
position: absolute;
top: 30px;
width: 38px;
height: 38px;
padding: 16px;
border-radius: 50%;
background: red;
color: white;
}
输出:
如您所见,需要大量 css 和嵌套 html 来创建形状。正如@evnp所说 SVG 会让你的生活更轻松。
#right-triangle-red {
width: 0;
height: 0;
border-bottom: 300px solid red;
border-right: 500px solid transparent;
position: relative;
}
#right-trianlg-white {
width: 0;
height: 0;
border-bottom: 276px solid white;
border-right: 461px solid transparent;
position: relative;
z-index: 10;
top: 16px;
left: 10px;
}
.triangles {
position: relative;
}
#circle-purple {
width: 200px;
height: 200px;
background: purple;
border-radius: 50%;
position: relative;
}
#circle-white {
width: 190px;
height: 190px;
background: white;
border-radius: 50%;
position: relative;
z-index: 20;
top: 5px;
left: 5px;
}
#circle-green {
width: 15px;
height: 15px;
background: green;
border-radius: 50%;
position: absolute;
z-index: 40;
top: 86px;
left: 86px;
}
.circles {
position: relative;
z-index: 20;
top: -207px;
left: 10px;
}
.label {
font-size: 30px;
color: red;
z-index: 30;
position: relative;
}
.label-b {
top: -219px;
left: 510px;
}
.label-c {
top: -205px;
left: -31px;
}
.label-d {
color: green;
top: -341px;
left: 64px;
}
.shape-container {
position: relative;
}
<span class="label label-a">
A
</span>
<div class="shape-container">
<div class="triangles">
<div id="right-triangle-red">
<div id="right-trianlg-white">
</div>
</div>
</div>
<div class="circles">
<div id="circle-purple">
<div id="circle-white">
<div id="circle-green">
</div>
</div>
</div>
</div>
</div>
<span class="label label-b">
B
</span>
<span class="label label-c">
C
</span>
<span class="label label-d">
D
</span>
我会考虑this previous answer画三角形,然后再给圆加上渐变
.triangle {
--t:10; /* Thickness */
--c:black; /* Color */
--r:25px; /* Radius*/
width:100px;
height:100px;
display:inline-block;
border:calc(var(--t)*1px) solid transparent;
border-image:
linear-gradient(to bottom left,
transparent 49.5%,var(--c) 50%) var(--t);
background:
/* Left side */
linear-gradient(to bottom left,
transparent 49.5%,var(--c) 50% calc(50% + var(--t)*1px),
transparent calc(50% + var(--t)*1px + 1px)),
/* circle */
radial-gradient(circle var(--r) at var(--r) calc(100% - var(--r)),
transparent calc(100% - 5px), yellow calc(100% - 4px) 99%,transparent 100%);
background-origin:border-box,padding-box;
background-repeat:no-repeat;
}
body {
background:pink;
}
<div class="triangle"></div>
<div class="triangle" style="--t:5;--c:blue;width:150px;--r:33px;"></div>
<div class="triangle" style="--t:8;--c:red;height:150px;--r:31px;"></div>
<div class="triangle" style="--t:15;--c:green;width:80px;--r:20px"></div>
你只需要一些数学来计算半径。相关:https://math.stackexchange.com/q/2247599/695610
如您所见,它的末尾是一个简单的 div,因此您可以在其中写入内容并按需要对齐