2
форма Угловые Указал с помощью CSS границы
Я борюсь с CSS в выполнении выше углу, как указано на рисунке,
я старался и получил это Но не могу получить идеальный угол с помощью CSS.
Я пытаюсь как создать Bigger треугольник зеленого цвета, а затем создать меньший треугольник белого цвета, чтобы получить этот взгляд.
HTML КОД:
<div id="loginmain">
<div id="login" class="login_hover">
</div>
<div id="login-content" class="triangle-border top" style="">
<form onsubmit="loginAjax(); return false;" method="POST" _lpchecked="1">
<div><lable>Username</lable><input name="username" id="username" type="text"></div>
<div><lable>Password</lable><input name="password" id="password" type="password"></div>
<a class="sign-up left clear">Sign Up</a>
<a class="forgot">Forgot Password?</a>
<input name="login" type="submit" value="Sign In">
</form>
</div>
</div>
CSS КОД:
#login {
position:absolute;
top:10px;
right:10px;
width:53px;
height:47px;
background: url(../imgs/icons/user_border.png);
background-size:contain;
cursor: pointer;
}
#login:hover , .login_hover {
background: url(../imgs/icons/user.png) !important;
z-index:9999;
}
.triangle-border {
position:relative;
padding:8px;
margin:1em 0 3em;
border:3px solid #00B100;
color:#333;
background:#fff;
/* css3 */
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
/* Variant : for left positioned triangle
------------------------------------------ */
.triangle-border.left {
margin-left:30px;
}
/* Variant : for right positioned triangle
------------------------------------------ */
.triangle-border.right {
margin-right:30px;
}
/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */
.triangle-border:before {
content:"";
position:absolute;
bottom:-20px; /* value = - border-top-width - border-bottom-width */
left:40px; /* controls horizontal position */
border-width:20px 20px 0;
border-style:solid;
border-color:#00B100 transparent transparent #00B100 ;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
/* creates the smaller triangle */
.triangle-border:after {
content:"";
position:absolute;
bottom:-13px; /* value = - border-top-width - border-bottom-width */
left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
border-width:13px 13px 0;
border-style:solid;
border-color:#00B100 transparent transparent #00B100 ;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
/* Variant : top
------------------------------------------ */
/* creates the larger triangle */
.triangle-border.top:before {
top:-20px; /* value = - border-top-width - border-bottom-width */
bottom:auto;
left:auto;
right:10px; /* controls horizontal position */
border-width:0 15px 20px;
}
/* creates the smaller triangle */
.triangle-border.top:after {
top:-15px; /* value = - border-top-width - border-bottom-width */
bottom:auto;
left:auto;
right:10px; /* value = (:before right) + (:before border-right) - (:after border-right) */
border-width:0 15px 20px;
}
/* Variant : left
------------------------------------------ */
/* creates the larger triangle */
.triangle-border.left:before {
top:10px; /* controls vertical position */
bottom:auto;
left:-30px; /* value = - border-left-width - border-right-width */
border-width:15px 30px 15px 0;
border-color:transparent #5a8f00;
}
/* creates the smaller triangle */
.triangle-border.left:after {
top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
bottom:auto;
left:-21px; /* value = - border-left-width - border-right-width */
border-width:9px 21px 9px 0;
border-color:transparent #fff;
}
/* Variant : right
------------------------------------------ */
/* creates the larger triangle */
.triangle-border.right:before {
top:10px; /* controls vertical position */
bottom:auto;
left:auto;
right:-30px; /* value = - border-left-width - border-right-width */
border-width:15px 0 15px 30px;
border-color:transparent #5a8f00;
}
/* creates the smaller triangle */
.triangle-border.right:after {
top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
bottom:auto;
left:auto;
right:-21px; /* value = - border-left-width - border-right-width */
border-width:9px 0 9px 21px;
border-color:transparent #fff;
}
#login-content {
position: absolute;
top: 60px;
right:10px;
width: 290px;
color: #848484;
z-index: 9;
padding: 13px;
}
#login-content a { width: 100%; display: block; }
#login-content lable {
padding-right:10px;
width: 30%;
display: inline-block;
}
#login-content div {
margin-top: 10px;
}
#login-content input[type=text] ,#login-content input[type=password] {
width: 58%;
height: 25px;
border: 1px solid #A6A6A6;
font-size:12px;
}
#login-content input[type=text]:focus ,#login-content input[type=password]:focus {
border: 1px solid rgba(4, 213, 4, 1);
}
#login-content a.forgot {
float:right;
font-size:12px;
cursor: pointer;
margin-top: 5px;
color:#848484;
}
#login-content .sign-up{
position: absolute;
bottom: 15px;
font-weight: normal;
display: none;
}
#login-content input[type=submit] {
clear: both;
margin-top: 10px;
float: right;
cursor: pointer;
font-size: 15px;
padding:5px 10px;
}
Просьба предложить решение для того же.
где ваш источник HTML, пожалуйста, поделитесь источником HTML – falguni
Добавлена HTML и код CSS, пожалуйста, проверьте в настоящее время –
Я думаю, вы должны сделать образ стрелы. без изображения вам не понравятся ваши решения. – falguni