Wie tringle Grenze in CSS entwerfen?

-2

Mit Html5, CSS3, Bootstrap Das möchte ich wie diesesWie tringle Grenze in CSS entwerfen?

div entwerfen bin ich sehr neu für CSS. Also bitte hilf mir das zu tun?

2016-09-07 Soumya Gangamwar

Es wird erwartet, dass Sie zumindest versuchen, diese für sich selbst zu codieren. Stack Overflow ist kein Code-Schreibdienst. Ich würde vorschlagen, dass Sie einige [** zusätzliche Forschung **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-sected-of-stack-overflow-users) tun entweder über Google oder durch die Suche nach SO, versuchen und. Wenn Sie immer noch Probleme haben, kommen Sie zurück mit ** Ihrem Code ** und erklären Sie, was Sie versucht haben und warum es nicht funktioniert hat. –

prüfen diese Schnipsel

.box { 
 
    width:300px; 
 
    position: relative; 
 
    background: #fff; 
 
    height:100px; 
 
    top:50px; 
 
    border: 4px solid #000; 
 
} 
 
.box:after, .box:before { 
 
    bottom: 100%; 
 
    left: 50%; 
 
    border: solid transparent; 
 
    content: " "; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    pointer-events: none; 
 
} 
 

 
.box:after { 
 
    border-color: rgba(136, 183, 213, 0); 
 
    border-bottom-color: #fff; 
 
    border-width: 20px; 
 
    margin-left: -20px; 
 
} 
 
.box:before { 
 
    border-color: rgba(194, 225, 245, 0); 
 
    border-bottom-color: #000; 
 
    border-width: 26px; 
 
    margin-left: -26px; 
 
}

<div class="box"></div>

Quelle

2016-09-07 10:37:07

Wir dies durch die Verwendung HTML5 und CSS3 tun können.

.arrow_box { 
 
\t position: relative; 
 
\t background: #88b7d5; 
 
\t border: 2px solid #c2e1f5; 
 
\t top:20px; 
 
\t width:400px; 
 
    } 
 
    .arrow_box p{margin:10px; padding:10px;} 
 
    .arrow_box:after, .arrow_box:before { 
 
\t bottom: 100%; 
 
\t left: 50%; 
 
\t border: solid transparent; 
 
\t content: " "; 
 
\t height: 0; 
 
\t width: 0; 
 
\t position: absolute; 
 
\t pointer-events: none; 
 
    } 
 

 
    .arrow_box:after { 
 
\t border-color: rgba(136, 183, 213, 0); 
 
\t border-bottom-color: #88b7d5; 
 
\t border-width: 30px; 
 
\t margin-left: -30px; 
 
    } 
 
    .arrow_box:before { 
 
\t border-color: rgba(194, 225, 245, 0); 
 
\t border-bottom-color: #c2e1f5; 
 
\t border-width: 33px; 
 
\t margin-left: -33px; 
 
    }

<div class="arrow_box"> 
 
    <p> Text Area</p> 
 
</div>

Quelle

2016-09-07 10:41:25 bala

.boxDiv { 
 
    \t position: relative; 
 
    \t background: #ffffff; 
 
    \t border: 4px solid #c2e1f5; 
 
     top: 50px; 
 
     min-height:100px; 
 
    } 
 
    .boxDiv:after, .boxDiv:before { 
 
    \t bottom: 100%; 
 
    \t left: 50%; 
 
    \t border: solid transparent; 
 
    \t content: " "; 
 
    \t height: 0; 
 
    \t width: 0; 
 
    \t position: absolute; 
 
    \t pointer-events: none; 
 
    } 
 
    .boxDiv:after { 
 
    \t border-color: rgba(255, 255, 255, 0); 
 
    \t border-bottom-color: #ffffff; 
 
    \t border-width: 30px; 
 
    \t margin-left: -30px; 
 
    } 
 
    .boxDiv:before { 
 
    \t border-color: rgba(194, 225, 245, 0); 
 
    \t border-bottom-color: #c2e1f5; 
 
    \t border-width: 36px; 
 
    \t margin-left: -36px; 
 
    }

<div class="boxDiv">Contents</div>

Quelle

2016-09-07 10:42:05

I @Hitesh Misro Antwort nach Ihrer aktualisierten Anforderung geändert haben.

.box { 
 
    width:300px; 
 
    position: relative; 
 
    background: #fff; 
 
    height:100px; 
 
    top:50px; 
 
    border: 4px solid #000; 
 
} 
 
.box:after, .box:before { 
 
    bottom: 100%; 
 
    left: 50%; 
 
    border: solid transparent; 
 
    content: " "; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    pointer-events: none; 
 
} 
 

 
.box:after { 
 
    border-color: rgba(136, 183, 213, 0); 
 
    border-bottom-color: #fff; 
 
    border-width: 20px; 
 
    margin-left: -20px; 
 
} 
 
.box:before { 
 
    border-color: rgba(194, 225, 245, 0); 
 
    border-bottom-color: #000; 
 
    border-width: 26px; 
 
    margin-left: -26px; 
 
} 
 

 
.box span 
 
{ 
 
    display:block; 
 
    position:relative; 
 
    width:100%; 
 
    height:30px; 
 
    top:25px; 
 
    text-align:center; 
 
    border-top: 5px solid #000; 
 
    border-bottom: 5px solid #000; 
 
    padding-top: 10px; 
 
}

<div class="box"> 
 
    <span>Hello this is some text</span> 
 
</div>

Quelle

2016-09-07 11:28:56

Wie tringle Grenze in CSS entwerfen?

Antwort

Verwandte Themen