Question

任何人都可以指导我，如何在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>&copy; 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;
}

Answer 1

边界半径CSS属性可以帮助您获得圆角 - 特别是这样的东西应该为包含其他所有内容的粉红色元素提供技巧。

div {
    /* border-radius: Top-Left , Top-Right, Bottom-Right, Bottom-Left */
    border-radius: 20px 5px 20px 5px;
}

我个人会把它分成几个div，一个标题和正文。将带有颜色的背景黄色圆点放在顶部div上，并将边框半径应用于顶部。

然后将内容放在正文中的其他div并为每种情况应用这些边框样式。

然而，这只是一种方法，我相信还有很多其他的方法。

more info about CSS Rounded borders here

Answer 2

Here's the jsFiddle

你的设计很差。您不必将所有div嵌套在一起。我稍微更改了你的HTML（只是重新排列了你的div并添加了两个新的div leftDiv和rightDiv） HTML：

<body>
    <div id="contentContainer">
        <div id="setBackground">
            <div id="header"> <span class="style1">This is LOGO </span>

                <hr />
            </div>
            <div id="body_block">
                    <p class="intro">Introduction</p>

                   <h1> Back </h1>
                   Click Here

                   <h2> Next </h2>
                   Click Here




             </div>


            <div id="leftDiv">
                    <p>More about Web Design:</p>
                    <p>• Bla bla bla... .</p>
            </div>
            <div id="rightDiv">
                    <p>Contact:</p>
                    <p>• Bla bla bla...</p>
            </div>

            <div id="footer">
                    <!--hr class="footer"/-->
                    <p>
&copy; Copyright 2013
                        <a href="">sample.com </a>|
                        <a href="">More Site </a>
                        </p>
                </div>
          </div>
        </div>
    </body>

将这些规则添加到CSS中：

#leftDiv{
    clear:both;
    width:200px;
    background:brown;
    float:left;
    border-top-left-radius:25px;

}
#rightDiv{
    margin-left:20px;

    border-bottom-right-radius:25px;
     background:brown;
    float:left;
}

Answer 3

试试这个。

     border-bottom-right-radius:20px;

Answer 4

边界半径是您想要查看的内容：http://www.w3schools.com/cssref/css3_pr_border-radius.asp

在你的情况下，它会是这样的：

border-radius: 100px 0 100px 0; /*top-left top-right bottom-right bottom-left */

http://jsfiddle.net/spKMM/

Answer 5

尝试border-radius属性

示例1

股利{边界半径：10px的;}

示例2

Div {border-radius：10px 15px;}

有关更多信息，请访问： - CSS-TRICKS

Answer 6

this怎么样？您可以使用div：P

创建“伪”“hr”标记

//IN HTML

<div id="CUSTOM_HR_WITH_TEXT">SAMPLE TEXT // Custom "hr" tag with text.</div>

//AND IN CSS

#CUSTOM_HR_WITH_TEXT {
border-radius: 10px 10px 10px 10px;
border: 0;
height: auto;
width: auto;
background-color: #993300;
color: #fff;
text-align: center;
}

CSS＆amp; HTML方形背景

6 个答案: