任何人都可以指导我，如何在 CSS 中创建一个“几乎”正方形的背景？
我想要棕色背景，上面有带有错误元素符号的文本，以及如何在 CSS 中创建右上角的黄色虚线？
我的工作进度在这里:
HTML:
<body>
<div id="contentContainer">
<div id="setBackground">
<div id="header"> <span class="style1">This is LOGO </span>
<hr />
<div id="body_block">
<p class="intro">Introduction</p>
<h1> Back </h1>
Click Here
<h2> Next </h2>
Click Here
<p>More about Web Design:</p>
<p>• Bla bla bla... .</p>
<p>Contact:</p>
<p>• Bla bla bla...</p>
<div id="footer">
<!--hr class="footer"/-->
<p>© Copyright 2013
<a href="">sample.com </a>|
<a href="">More Site </a>
</p>
</div>
</div>
</div>
</div>
</div>
</body>
CSS:
@charset"UTF-8";
/* CSS Document */
hr {
clear:both;
border: 0;
height:12px;
width:100%;
background-color: #993300;
}
.intro {
color: #1e2a74;
font-size:16px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
}
#footer {
background-color:#6994AF;
clear: both;
color: #FFFFFF;
font-size: 0.8em;
margin: 0;
padding: 0;
font-family:Arial, Helvetica, sans-serif;
}
#footer p {
border-top: 1px solid #83CDE1;
margin: 0;
padding: 15px 0;
text-align: left;
}
#footer a {
text-align:right;
}
.style1 {
font-size: 24px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
}
最佳答案
border radius CSS 属性可以帮助您获得圆 Angular - 特别是像这样的东西应该可以解决包含其他所有内容的粉红色元素。
div {
/* border-radius: Top-Left , Top-Right, Bottom-Right, Bottom-Left */
border-radius: 20px 5px 20px 5px;
}
我个人会把它分成几个 div，一个标题和正文。将带有颜色的背景黄色圆点放在顶部 div 上，并将边框半径应用于顶部。
然后将其他 div 的内容放在正文中，并为每种情况应用这些边框样式。
然而，这只是一种方法，我相信还有很多其他方法。
关于html - CSS & HTML 方形背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16630384/