Home  >  Article  >  Web Front-end  >  这种浮动在边框边缘的效果怎么做?_html/css_WEB-ITnose

这种浮动在边框边缘的效果怎么做?_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 09:48:371366browse

像这种效果,请问有没有bootstrap的控件呢?或者用普通的css怎么布局?

回复讨论(解决方案)

图片,  定位

大容器相对定位,图片绝对定位,负值

完全听不懂啊

完全听不懂那你问个球。。。。。div+CSS去学学吧

<style type="text/css">*{margin:0;padding:0}.box{position:relative;width:400px;height:300px;background:#fafafa;border:1px solid #ccc;margin:50px 0 0 50px}.arrow{position:absolute;top:-20px;right:0;width:50px;height:50px;background:#f00;color:#fff;}</style>

<div class="box">	<div class="arrow">右上角</div>    <p>中华人民共和国中华人民共和国</p></div>

把arrow里的换成你右上角的图。。

<style type="text/css">*{margin:0;padding:0}.box{position:relative;width:400px;height:300px;background:#fafafa;border:1px solid #ccc;margin:50px 0 0 50px}.arrow{position:absolute;top:-20px;right:0;width:50px;height:50px;background:#f00;color:#fff;}</style>

<div class="box">	<div class="arrow">右上角</div>    <p>中华人民共和国中华人民共和国</p></div>

把arrow里的换成你右上角的图。。
谢谢你的回答

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn