我刚刚开始学习 HTML、CSS 和网络编码!我找到了这个 CSS 大括号元素示例，其中大括号 ({) 位于内容的左侧。我想要做的是将其切换，使其位于内容的右侧和相反的大括号 (})。
有人可以指出我如何实现这一目标的正确方向吗？!
感谢您提供的任何帮助
<!DOCTYPE html>
<html lang='en' class=''>
<head>
<style class="cp-pen-styles">
.curly-braced-block {
position: relative;
margin: 20px 0;
}
.curly-braced-block .brace-left {
top: 0;
left: 0;
float: left;
width: 20px;
height: 100%;
position: absolute;
}
.curly-braced-block .brace-left .brace-top,
.curly-braced-block .brace-left .brace-bottom {
position: absolute;
width: 10px;
height: 50%;
left: 10px;
}
.curly-braced-block .brace-left .brace-top {
top: 0;
}
.curly-braced-block .brace-left .brace-bottom {
top: 50%;
}
.curly-braced-block .brace-left .brace-top:before,
.curly-braced-block .brace-left .brace-top:after,
.curly-braced-block .brace-left .brace-bottom:before,
.curly-braced-block .brace-left .brace-bottom:after {
content: "";
height: 50%;
width: 10px;
display: block;
position: absolute;
}
.curly-braced-block .brace-left .brace-top:before {
top: 0;
left: 0;
border-left: 3px solid black;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
}
.curly-braced-block .brace-left .brace-top:after {
bottom: 0;
left: -10px;
border-right: 3px solid black;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
}
.curly-braced-block .brace-left .brace-bottom:before {
top: 0;
left: -10px;
border-right: 3px solid black;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;
}
.curly-braced-block .brace-left .brace-bottom:after {
bottom: 0;
left: 0;
border-left: 3px solid black;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
}
.curly-braced-block .content {
text-align: left;
margin-left: 25px;
}
</style>
</head>
<body>
<div class="curly-braced-block">
<div class="brace-left">
<div class="brace-top"></div>
<div class="brace-bottom"></div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et fermentum metus. Proin eget euismod dui. Mauris consectetur ipsum orci, nec iaculis odio ullamcorper sit amet. In hac habitasse platea dictumst. Nulla imperdiet, ligula sed dignissim lobortis,
ligula turpis venenatis sem, ac luctus enim leo quis ipsum. In id mollis risus. Vivamus auctor arcu nec blandit cursus. Vestibulum hendrerit suscipit tellus at luctus. Duis convallis libero sit amet nulla lobortis aliquam. Nullam sodales facilisis
massa, sed semper velit semper in. Nulla congue aliquam felis ac fringilla.s venenatis sem, ac luctus enim leo quis ipsum. In id mollis risus. Vivamus auctor arcu nec blandit cursus. Vestibulum hendrerit suscipit tellus at luctus. Duis convallis libero sit amet nulla lobortis aliquam. Nullam sodales facilisis
massa, sed semper velit semper in. Nulla congue aliquam felis ac fringilla.
</div>
</div>
</body>
</html>
最佳答案
您可以通过在 css 中左右交换来轻松创建 .brace-right 类。
然后，在 HTML 中，只需将 class="brace-left" 更改为 class="brace-right"
.curly-braced-block {
position: relative;
margin: 20px 0;
}
.curly-braced-block .brace-right {
top: 0;
right: 0;
float: right;
width: 20px;
height: 100%;
position: absolute;
}
.curly-braced-block .brace-right .brace-top,
.curly-braced-block .brace-right .brace-bottom {
position: absolute;
width: 10px;
height: 50%;
right: 10px;
}
.curly-braced-block .brace-right .brace-top {
top: 0;
}
.curly-braced-block .brace-right .brace-bottom {
top: 50%;
}
.curly-braced-block .brace-right .brace-top:before,
.curly-braced-block .brace-right .brace-top:after,
.curly-braced-block .brace-right .brace-bottom:before,
.curly-braced-block .brace-right .brace-bottom:after {
content: "";
height: 50%;
width: 10px;
display: block;
position: absolute;
}
.curly-braced-block .brace-right .brace-top:before {
top: 0;
right: 0;
border-right: 3px solid black;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;
}
.curly-braced-block .brace-right .brace-top:after {
bottom: 0;
right: -10px;
border-left: 3px solid black;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
}
.curly-braced-block .brace-right .brace-bottom:before {
top: 0;
right: -10px;
border-left: 3px solid black;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
}
.curly-braced-block .brace-right .brace-bottom:after {
bottom: 0;
right: 0;
border-right: 3px solid black;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
}
.curly-braced-block .content {
text-align: justify;
margin-right: 25px;
}<!DOCTYPE html>
<html lang='en' class=''>
<head>
</head>
<body>
<div class="curly-braced-block">
<div class="brace-right">
<div class="brace-top"></div>
<div class="brace-bottom"></div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et fermentum metus. Proin eget euismod dui. Mauris consectetur ipsum orci, nec iaculis odio ullamcorper sit amet. In hac habitasse platea dictumst. Nulla imperdiet, ligula sed dignissim lobortis,
ligula turpis venenatis sem, ac luctus enim leo quis ipsum. In id mollis risus. Vivamus auctor arcu nec blandit cursus. Vestibulum hendrerit suscipit tellus at luctus. Duis convallis libero sit amet nulla lobortis aliquam. Nullam sodales facilisis
massa, sed semper velit semper in. Nulla congue aliquam felis ac fringilla.s venenatis sem, ac luctus enim leo quis ipsum. In id mollis risus. Vivamus auctor arcu nec blandit cursus. Vestibulum hendrerit suscipit tellus at luctus. Duis convallis libero sit amet nulla lobortis aliquam. Nullam sodales facilisis
massa, sed semper velit semper in. Nulla congue aliquam felis ac fringilla.
</div>
</div>
</body>
</html>关于html - 更改 CSS 元素的位置(装饰性花括号从左到右)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54488417/