1

下の図に示すように、CSSを使用して動的なコーナーフレームを作成するにはどうすればよいですか？ここに画像の説明を入力してください

以下は私の現在の解決策ですが、2つの異なる幅の2つのコンテンツがあるため、十分に動的ではありません。

    <p class="description-header">
        <span class="frame-header frame-header-top"></span>
        <span class="description-text"><?php echo $home->excerpt;?></span>
        <span class="frame-header frame-header-bottom"></span>
    </p>

css、

.description-header {
    position:absolute;
    bottom:0;
    right:0;
    width:182px;
    font-size:12px;
    line-height:14px;
    margin:0;
    padding:0;
    border:0 solid red;
}

.frame-header {
    display:block;
    width:182px;
    height:10px;
    float:none;
    background-image:url(../images/frame-header.jpg);
    background-repeat: no-repeat;
    margin:0;
    border:0 solid red;
}

.frame-header-top {
    background-position: top left;
}

.frame-header-bottom {
    background-position: bottom left;
}

.description-text {
    width:160px;
    display:block;
    float:none;
    margin: 0 auto;
    border:0 solid red;
}

より良いアイデアはありますか？

4

3 に答える 3

6

これは、1つのHTML要素、フレーム（ラッパー）、およびコンテンツのみを使用する、積極的に純粋なCSSソリューションです。これは単一の段落であると想定しています。jsfiddleでチェックしてください。

アイデアは、コーナーを追加するために2つのHTML要素で疑似要素:beforeを使用することです。:after2つのHTML要素に対して2つの疑似要素を使用すると、4つのコーナーを作成できます。

ChromeとFirefoxでのみテストしました。

編集：CSSを変更して、もう少し一般的なものにしました。コンテンツの段落が複数ある場合、または見出しの後に段落が続く場合、あるいは単にスパンがある場合でも機能します。

HTML

<div class="frame">
    <p>
        Lorem ipsum dolor...
    </p>   
    <p>
        Mauris bibendum mauris non
    </p>
</div>

CSS

.frame {
    position:relative;
    padding:5px;
}
.frame:before {
    height:10px;
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    border-left:1px solid black;
    border-right:1px solid black;
    content: " ";
}
.frame:after {
    height:10px;
    position:absolute;
    bottom:0px;
    left:0px;
    right:0px;
    border-left:1px solid black;
    border-right:1px solid black;
    content: " ";
}
.frame > p {
    text-align:justify;
    margin:0;
    padding:0;
}
.frame :first-child:before {
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    width:10px;
    border-top:1px solid black;
    border-bottom:1px solid black;
    content: " ";
}

.frame :first-child:after {
    position:absolute;
    top:0px;
    bottom:0px;
    right:0px;
    width:10px;
    border-top:1px solid black;
    border-bottom:1px solid black;
    content: " ";
}
于 2013-03-14T16:51:58.067 に答える
2

あなたはこのようなことを試すことができます：

html：

<p class="description-header">
    <?php echo $home->excerpt;?></span>
</p>

css：

.description-header{
    position:absolute;
    bottom:0;
    right:0;
    width:182px;
    font-size:12px;
    line-height:14px;
    margin:0;
    border:0 solid red;
    background: url(../images/frame-header.jpg) left top no-repeat, url(../images/frame-header.jpg) left bottom no-repeat;
    padding: 10px;
}
于 2013-03-14T16:24:47.190 に答える
1

デモ： http： //jsfiddle.net/4QkYA/

--html-

<div class="frame">
    <div class="top-l"></div>
    <div class="top-r"></div>
    <img src="http://lorempixel/200/200/sports/2" alt=""/>
    <div class="bottom-l"></div>
    <div class="bottom-r"></div>
</div>

--css-

img {
    margin: 0;
    padding: 3px;
    position: relative;
    z-index: 1;
    display: block;
}

.frame {
    position: relative;
    display: inline-block;
}

.frame > div {
    width: 18px;
    height: 18px;
    border: 3px solid black;
    position: absolute;
    z-index: 0;
}

.top-l { top: 0; left: 0; }
.top-r { top: 0; right: 0; }
.bottom-l { bottom: 0; left: 0; }
.bottom-r { bottom: 0; right: 0; }
于 2013-03-14T16:29:07.980 に答える