Skip to content

Commit

Permalink
增加 3 6 9 12 四个中点位置的箭头
Browse files Browse the repository at this point in the history
  • Loading branch information
@afc163
afc163 committed Nov 12, 2013
1 parent ddd8d95 commit 23636a2
Show file tree
Hide file tree
Showing 2 changed files with 150 additions and 20 deletions.
71 changes: 67 additions & 4 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
<div>
<a href="https://app.alipay.com/xxxx" target="_blank">现在使用</a>
</div>
</div>
</div>
</div>
</div>
</div>
Expand All @@ -67,7 +67,7 @@
````html
<div class="ui-poptip">
<div class="ui-poptip-shadow">
<div class="ui-poptip-container">
<div class="ui-poptip-container">
<div class="ui-poptip-arrow ui-poptip-arrow-10">
<em></em>
<span></span>
Expand All @@ -85,7 +85,7 @@
````html
<div class="ui-poptip">
<div class="ui-poptip-shadow">
<div class="ui-poptip-container">
<div class="ui-poptip-container">
<div class="ui-poptip-arrow ui-poptip-arrow-2">
<em></em>
<span></span>
Expand Down Expand Up @@ -207,7 +207,7 @@
````html
<div class="ui-poptip ui-poptip-white">
<div class="ui-poptip-shadow">
<div class="ui-poptip-container">
<div class="ui-poptip-container">
<div class="ui-poptip-arrow ui-poptip-arrow-5">
<em></em>
<span></span>
Expand All @@ -218,3 +218,66 @@
</div>
````

### 9 点钟位置

````html
<div class="ui-poptip">
<div class="ui-poptip-shadow">
<div class="ui-poptip-container">
<div class="ui-poptip-arrow ui-poptip-arrow-9">
<em></em>
<span></span>
</div>
<div class="ui-poptip-content">我是内容我是内容<br>我是内容我是内容<br>我是内容我是内容</div>
</div>
</div>
</div>
````

### 3 点钟位置蓝色

````html
<div class="ui-poptip ui-poptip-blue">
<div class="ui-poptip-shadow">
<div class="ui-poptip-container">
<div class="ui-poptip-arrow ui-poptip-arrow-3">
<em></em>
<span></span>
</div>
<div class="ui-poptip-content">我是内容我是内容<br>我是内容我是内容<br>我是内容我是内容<br>我是内容我是内容</div>
</div>
</div>
</div>
````

### 12 点钟位置

````html
<div class="ui-poptip">
<div class="ui-poptip-shadow">
<div class="ui-poptip-container">
<div class="ui-poptip-arrow ui-poptip-arrow-12">
<em></em>
<span></span>
</div>
<div class="ui-poptip-content">我是内容我是内容我是内容我是内容</div>
</div>
</div>
</div>
````

### 6 点钟位置

````html
<div class="ui-poptip">
<div class="ui-poptip-shadow">
<div class="ui-poptip-container">
<div class="ui-poptip-arrow ui-poptip-arrow-6">
<em></em>
<span></span>
</div>
<div class="ui-poptip-content">我是内容我是内容我是内容我是内容</div>
</div>
</div>
</div>
````
99 changes: 83 additions & 16 deletions src/poptip.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ a.ui-poptip-close:hover {

/* 箭头用 border 实现 http://www.css88.com/demo/border/border1.html */

/* 箭头在左边 10 */
/* 箭头在左边 10,9 */

.ui-poptip-arrow-10 {
left: -6px;
Expand All @@ -113,15 +113,33 @@ a.ui-poptip-close:hover {
top: 0;
left: -1px;
border-right-color: #ffbb76;
border-width: 6px 6px 6px 0;
border-width: 6px 6px 6px 0;
}

.ui-poptip-arrow-10 span {
border-right-color: #FFFCEF;
border-width: 6px 6px 6px 0;
}

/* 箭头在右边 2 */
.ui-poptip-arrow-9 {
left: -6px;
top: 50%;
}

.ui-poptip-arrow-9 em {
top: -6px;
left: -1px;
border-right-color: #ffbb76;
border-width: 6px 6px 6px 0;
}

.ui-poptip-arrow-9 span {
top: -6px;
border-right-color: #FFFCEF;
border-width: 6px 6px 6px 0;
}

/* 箭头在右边 2,3 */

.ui-poptip-arrow-2 {
top: 10px;
Expand All @@ -140,15 +158,28 @@ a.ui-poptip-close:hover {
border-width: 6px 0 6px 6px;
}

/* ui-poptip-arrow-11 */
.ui-poptip-arrow-11 em,
.ui-poptip-arrow-11 span {
.ui-poptip-arrow-3 {
top: 50%;
right: 0;
}

.ui-poptip-arrow-3 em {
top: -6px;
left: 1px;
border-left-color: #ffbb76;
border-width: 6px 0 6px 6px;
}

.ui-poptip-arrow-3 span {
top: -6px;
border-left-color: #FFFCEF;
border-width: 6px 0 6px 6px;
}

/* 箭头在上边 1 11 */
/* 箭头在上边 11,12,1 */

.ui-poptip-arrow-11 em,
.ui-poptip-arrow-12 em,
.ui-poptip-arrow-1 em {
border-width: 0 6px 6px;
border-bottom-color: #ffbb76;
Expand All @@ -157,6 +188,7 @@ a.ui-poptip-close:hover {
}

.ui-poptip-arrow-11 span,
.ui-poptip-arrow-12 span,
.ui-poptip-arrow-1 span {
border-width: 0 6px 6px;
border-bottom-color: #FFFCEF;
Expand All @@ -166,14 +198,26 @@ a.ui-poptip-close:hover {
left: 14px;
top: -6px;
}

.ui-poptip-arrow-1 {
right: 28px;
top: -6px;
}

/* 箭头在下方 5 7 */
.ui-poptip-arrow-12 {
left: 50%;
top: -6px;
}

.ui-poptip-arrow-12 em,
.ui-poptip-arrow-12 span {
left: -6px;
}

/* 箭头在下方 5 6 7 */

.ui-poptip-arrow-5 em,
.ui-poptip-arrow-6 em,
.ui-poptip-arrow-7 em {
border-width: 6px 6px 0;
border-top-color: #ffbb76;
Expand All @@ -182,6 +226,7 @@ a.ui-poptip-close:hover {
}

.ui-poptip-arrow-5 span,
.ui-poptip-arrow-6 span,
.ui-poptip-arrow-7 span {
border-width: 6px 6px 0;
border-top-color: #FFFCEF;
Expand All @@ -192,11 +237,21 @@ a.ui-poptip-close:hover {
bottom: 0;
}

.ui-poptip-arrow-6 {
left: 50%;
bottom: 0;
}

.ui-poptip-arrow-7 {
left: 14px;
bottom: 0;
}

.ui-poptip-arrow-6 em,
.ui-poptip-arrow-6 span {
left: -6px;
}

/* ie9 filter */
:root .ui-poptip-shadow {
FILTER: none\9;
Expand All @@ -217,34 +272,40 @@ a.ui-poptip-close:hover {
border: 1px solid #B9C8D3;
}

.ui-poptip-blue .ui-poptip-arrow-10 em {
.ui-poptip-blue .ui-poptip-arrow-10 em,
.ui-poptip-blue .ui-poptip-arrow-9 em {
border-right-color: #B9C8D3;
}
.ui-poptip-blue .ui-poptip-arrow-11 em,
.ui-poptip-blue .ui-poptip-arrow-12 em,
.ui-poptip-blue .ui-poptip-arrow-1 em {
border-bottom-color: #B9C8D3;
}
.ui-poptip-blue .ui-poptip-arrow-2 em,
.ui-poptip-blue .ui-poptip-arrow-4 em {
.ui-poptip-blue .ui-poptip-arrow-3 em {
border-left-color: #B9C8D3;
}
.ui-poptip-blue .ui-poptip-arrow-5 em,
.ui-poptip-blue .ui-poptip-arrow-6 em,
.ui-poptip-blue .ui-poptip-arrow-7 em {
border-top-color: #B9C8D3;
}

.ui-poptip-blue .ui-poptip-arrow-10 span {
.ui-poptip-blue .ui-poptip-arrow-10 span,
.ui-poptip-blue .ui-poptip-arrow-9 span {
border-right-color: #F8FCFF;
}
.ui-poptip-blue .ui-poptip-arrow-11 span,
.ui-poptip-blue .ui-poptip-arrow-12 span,
.ui-poptip-blue .ui-poptip-arrow-1 span {
border-bottom-color: #F8FCFF;
}
.ui-poptip-blue .ui-poptip-arrow-2 span,
.ui-poptip-blue .ui-poptip-arrow-4 span {
.ui-poptip-blue .ui-poptip-arrow-3 span {
border-left-color: #F8FCFF;
}
.ui-poptip-blue .ui-poptip-arrow-5 span,
.ui-poptip-blue .ui-poptip-arrow-6 span,
.ui-poptip-blue .ui-poptip-arrow-7 span {
border-top-color: #F8FCFF;
}
Expand All @@ -265,34 +326,40 @@ a.ui-poptip-close:hover {
border: 1px solid #b1b1b1;
}

.ui-poptip-white .ui-poptip-arrow-10 em {
.ui-poptip-white .ui-poptip-arrow-10 em,
.ui-poptip-white .ui-poptip-arrow-9 em {
border-right-color: #b1b1b1;
}
.ui-poptip-white .ui-poptip-arrow-11 em,
.ui-poptip-white .ui-poptip-arrow-12 em,
.ui-poptip-white .ui-poptip-arrow-1 em {
border-bottom-color: #b1b1b1;
}
.ui-poptip-white .ui-poptip-arrow-2 em,
.ui-poptip-white .ui-poptip-arrow-4 em {
.ui-poptip-white .ui-poptip-arrow-3 em {
border-left-color: #b1b1b1;
}
.ui-poptip-white .ui-poptip-arrow-5 em,
.ui-poptip-white .ui-poptip-arrow-6 em,
.ui-poptip-white .ui-poptip-arrow-7 em {
border-top-color: #b1b1b1;
}

.ui-poptip-white .ui-poptip-arrow-10 span {
.ui-poptip-white .ui-poptip-arrow-10 span,
.ui-poptip-white .ui-poptip-arrow-9 span {
border-right-color: #fff;
}
.ui-poptip-white .ui-poptip-arrow-11 span,
.ui-poptip-white .ui-poptip-arrow-12 span,
.ui-poptip-white .ui-poptip-arrow-1 span {
border-bottom-color: #fff;
}
.ui-poptip-white .ui-poptip-arrow-2 span,
.ui-poptip-white .ui-poptip-arrow-4 span {
.ui-poptip-white .ui-poptip-arrow-3 span {
border-left-color: #fff;
}
.ui-poptip-white .ui-poptip-arrow-5 span,
.ui-poptip-white .ui-poptip-arrow-6 span,
.ui-poptip-white .ui-poptip-arrow-7 span {
border-top-color: #fff;
}

0 comments on commit 23636a2

Please sign in to comment.