добавить границу только в правом верхнем углу без других сторон или фона

введите здесь описание изображения

Я пытаюсь получить верхний правый треугольник, как показано на рисунке, но когда я применяю радиус границы, почему он применяет границы ко всем сторонам, поскольку я указал только радиус одной стороны. Хотя я применил border-top-right-radius: 5px; вместо border-radius: 0px 5px 0px 0px;, результат тот же. Любая помощь?

HTML:

<div class="pricing-head">
  <h3>Rainmarker</h3>
  <span>For up to 10 users</span>
  <div class="ribon"></div>
</div>

CSS:

.pricing-head {
    background-color: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 20px;
}
.pricing-head .ribon {
    position: absolute;
    top: 0;
    right: 0;
    width: 75px;
    height: 75px;
}
.pricing-head .ribon:before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    border-bottom: 70px solid transparent;
    border-left: 70px solid transparent;
    border-right: 70px solid #ffad6a;
    border-radius: 0 5px 0 0;
}

html css border-box
person Kcoitk    schedule 05.02.2016    source источник
comment
Какая картинка? Вы должны ссылаться на изображение, показывающее, что вы хотите?   -  person Ben Rhys-Lewis    schedule 05.02.2016

Ответы (2)


arrow_upward
1
arrow_downward

Для закругленной верхней правой границы выполните:

-webkit-border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;

Генератор: http://border-radius.com/

Чтобы получить верхний правый треугольник, выполните следующие действия:

width: 0;
height: 0;
border-style: solid;
border-width: 0 200px 200px 0;
border-color: transparent #009999 transparent transparent;

Генератор: http://triangle.designyourcode.io/

Чтобы получить как треугольник в правом верхнем углу, так и закругленный радиус границы в правом верхнем углу, используйте контейнер для угла с помощью border-radius и overflow:hidden.

.container {
  position: relative;
  width: 300px;
  height: 100px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
  overflow: hidden;
  border: 1px solid gray;
}

.corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 100px 100px 0;
  border-color: transparent #009999 transparent transparent;
}

.content {
  font-family: "Verdana";
  font-size: 12pt;
  text-align: center;
  height: 100px;
  line-height: 100px;
}
<div class="container">
  <div class="corner"></div>
  <div class="content">
    Rainmarker
  </div>
</div>

ВЫХОД

Угловой треугольник с радиусом границы

person SNag    schedule 05.02.2016
comment
Вы пропустили мой вопрос...... Хотя я применил border-top-right-radius: 5px; вместо радиуса границы: 0px 5px 0px 0px; но тот же результат. - person Kcoitk; 05.02.2016
comment
@Kcoitk: я не вижу border-top-right-radius в вашем вопросе. - person SNag; 05.02.2016
comment
@Kcoitk: А, теперь увидел. Я искал в вашем коде! - person SNag; 05.02.2016
comment
.container настроен на переполнение: скрытый; но это работает. Спасибо - person Kcoitk; 05.02.2016

arrow_upward
1
arrow_downward

Вот ручка, показывающая, что вы хотите: http://codepen.io/anon/pen/VeEKLP

Тебе нужно было :

border-style: solid;
border-width: 0 200px 200px 0;
border-color: transparent #007bff transparent transparent;

Вот хороший ресурс для создания треугольников css: http://apps.eky.hk/css-triangle-generator/

person Ben Rhys-Lewis    schedule 05.02.2016
comment
сэр, мне нужна поддержка радиусом 5 пикселей в правом верхнем углу треугольника. В codepen я не вижу верхний правый радиус, только треугольник - person Kcoitk; 05.02.2016
comment
Тогда добавьте его: top:5px; справа: 5 пикселей; как вы позиционируете абсолютно. - person Ben Rhys-Lewis; 05.02.2016
comment
codepen.io/anon/pen/OMBRXv применимо, но обозначьте его круглой рамкой вместо треугольник - person Kcoitk; 05.02.2016
comment
но это не делает верхний правый радиус ...... он смещается на 5 пикселей внутрь от верхнего правого угла. это не я смотрю, мне просто нужен радиус верхней правой части, сохраняющий треугольник - person Kcoitk; 05.02.2016
comment
Ах хорошо, я думаю, я понимаю, что вы имеете в виду. Возможно, посмотрите на этот предыдущий вопрос. Это довольно сложно, но должно решить это для вас: stackoverflow.com/questions/14446677/ - person Ben Rhys-Lewis; 05.02.2016
comment
@Kcoitk: см. мой ответ для этого. - person SNag; 05.02.2016
comment
Да, я думаю, что это слишком сложно, чтобы использовать его в настоящее время, но я могу найти решение codepen.io/ анон/ручка/KVGgXL - person Kcoitk; 05.02.2016