CSS中的輸入設計驗證問題

這是我還沒有實現：

我缺少從底部三角形。我想用css/css3來解決這個問題。這是我嘗試過，但沒有更迭：

.contact-form .parsley-errors-list .parsley-required:after{ 
padding: 8px; 
background-color:red 
margin-top: 1px; 
transition: none 0s ease 0s; 
position: absolute; 
content: ""; 
left: -6px; 
transform: rotate(45deg); 
}

你可以指導我如何實現與CSS/CSS3那個三角形？ THX

來源

2016-01-12 Chester

是的，沒有什麼特別的，只是從jquery和其他類似的東西。沒有什麼與css3相關的開發那個三角形 – Chester

使用此，看看它是否有助於

.contact-form .parsley-errors-list .parsley-required{ 
    position: relative; 
} 

.contact-form .parsley-errors-list .parsley-required:after{ 
    content: ''; 
    position: absolute; 
    top: 100%; 
    left: 10px; 
    border-left: 10px solid red; 
    border-bottom: 10px solid transparent; 
    transition: none 0s ease 0s; 
}

來源

2016-01-12 14:31:57

完美。萬分感謝！ – Chester

.arrow_box { 
position: relative; 
background: #FF0000; 
} 

.arrow_box:after { 
top: 100%; 
left: 50%; 
border: solid transparent; 
content: " "; 

height: 0; 
width: 0; 
position: absolute; 
pointer-events: none; 
border-color: rgba(255, 0, 0, 0); 
border-top-color: #FF0000; 
border-width: 15px; 
margin-left: -15px; 
}

對於「直」箭頭。

width: 0; 
height: 0; 
border-style: solid; 
border-width: 20px 20px 0 0; 
border-color: #ff0000 transparent transparent transparent;

這可以讓你使用邊框來創建它。

來源

2016-01-12 14:36:03

CSS中的輸入設計驗證問題

回答

相關問題