4

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;
}
4

6 に答える 6

0

border-radius プロパティを試す

例 1

Div{border-radius:10px;}

例 2

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

より良い情報については、以下をご覧ください:- CSS-TRICKS

于 2013-08-20T09:31:53.863 に答える
0

境界半径は、あなたが見たいものです: 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/

于 2013-05-19T01:03:27.657 に答える
0

これがjsFiddleです

あなたのデザインは本当に貧弱です。すべての div を互いに入れ子にする必要はありません。HTML を少し変更しました (div を再配置し、2 つの新しい div と を追加しましたleftDiv) rightDivHTML:

<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;
}
于 2013-05-19T00:59:04.587 に答える
0

これはどうですか？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;
}
于 2013-10-06T20:09:14.730 に答える