Question

我正在尝试实现右上角三角形，如图所示，但是当我应用边框半径时，为什么它会将边框应用于所有边，因为我只指定了一个边半径。虽然我应用了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;
}

Answer 1

对于圆角右上边框，请执行：

var uuid = require('node-uuid');
var crypto = require('crypto');

function generateAuthHeaders (clientId, clientKey, userId, requestId) {

    if (!clientId || !clientKey) {
        throw new Error('Must provide a Client ID and a Client Key');
    }

    // Generate a unique UserId and RequestId.
    userId      = userId || uuid.v1();

    // keep track of this requestId, you will need it for the RequestInfo Object
    requestId   = requestId || uuid.v1();

    var requestData = userId + ';' + requestId;

    // keep track of this timestamp, you will need it for the RequestInfo Object
    var timestamp   = Math.floor(Date.now() / 1000),  

        unescapeBase64Url = function (key) {
            return key.replace(/-/g, '+').replace(/_/g, '/');
        },

        escapeBase64Url = function (key) {
            return key.replace(/\+/g, '-').replace(/\//g, '_');
        },

        signKey = function (clientKey, message) {
            var key = new Buffer(unescapeBase64Url(clientKey), 'base64');
            var hash = crypto.createHmac('sha256', key).update(message).digest('base64');
            return escapeBase64Url(hash);

        },

        encodedData = signKey(clientKey, requestData + timestamp),
        headers = {
            'Hound-Request-Authentication': requestData,
            'Hound-Client-Authentication': clientId + ';' + timestamp + ';' + encodedData
        };

    return headers;
};

生成器：http://border-radius.com/

要获得一个右上角三角形，请执行：

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

生成器：http://triangle.designyourcode.io/

要同时获得右上角三角形和右上角的圆角边框半径，请使用width: 0; height: 0; border-style: solid; border-width: 0 200px 200px 0; border-color: transparent #009999 transparent transparent;和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;
}

输出

Answer 2

显示你想要的笔：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/

仅在没有其他边或背景的情况下添加边框右上半径

2 个答案: