亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

CSS三角形自定義邊框顏色

CSS三角形自定義邊框顏色

滄海一幻覺 2019-08-03 07:03:24
CSS三角形自定義邊框顏色嘗試為我的CSS三角形(邊框)使用自定義十六進制顏色。但是,由于它使用了邊框屬性,所以我不確定如何這樣做。我想避開javascript和CSS 3僅僅是因為兼容性。我試圖讓三角形有一個白色的背景與一個1 px邊框(圍繞三角形的角度)與顏色#CAD 5E0。這個是可能的嗎?到目前為止,我的情況如下:.container {     margin-left: 15px;     width: 200px;     background: #FFFFFF;     border: 1px solid #CAD5E0;     padding: 4px;     position: relative;     min-height: 200px;}.container:after {     content: '';     display: block;     position: absolute;     top: 10px;     left: 100%;     width: 0;     height: 0;     border-color: transparent transparent transparent #CAD5E0;     border-style: solid;     border-width: 10px;}我的小提琴:http://jsfiddle.net/4ZeCz/
查看完整描述

3 回答

?
弒天下

TA貢獻1818條經驗 獲得超8個贊

你得用兩個三角形來假裝.

.container {
    margin: 15px 30px;
    width: 200px;
    background: #fff;
    border: 1px solid #a00;
    position: relative;
    min-height: 200px;
    padding: 20px;
    text-align: center;
    color: #fff;
    font: bold 1.5em/180px Helvetica, sans-serif;
    text-shadow: 0 0 1px #000;}.container:after,.container:before {
    content: '';
    display: block;
    position: absolute;
    left: 100%;
    width: 0;
    height: 0;
    border-style: solid;}.container:after {
    top: 10px;
    border-color: transparent transparent transparent #fdd;
    border-width: 10px;}.container:before {
    top: 9px;
    border-color: transparent transparent transparent #a00;
    border-width: 11px;}

更新的Fiddle在這里





查看完整回答
反對 回復 2019-08-04
?
ITMISS

TA貢獻1871條經驗 獲得超8個贊

我認為這是一個簡單的使用夾徑:

.container {

  width: 150px;

  min-height: 150px;

  background: #ccc;

  padding: 8px;

  padding-right: 6%;

  display: inline-block;

  clip-path: polygon(0% 0%,0% 100%,90% 100%,90% 5%,100% 10%,90% 15%,90% 0%);

}

<div class="container">

test content

</div>




查看完整回答
反對 回復 2019-08-04
  • 3 回答
  • 0 關注
  • 506 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號